Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
    • Breadcrumbs
    • Buttons
      • Button
      • Empty button
      • Icon button
      • Button group
      • Patterns
      • Guidelines
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tree view
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Navigation
  • Buttons
  • Patterns

Button patterns

Split button Pattern

EUI

does not support split buttons specifically. Instead, use separate buttons for the main and overflow actions. This pattern is achieved by setting the display and size props on EuiButtonIcon to match that of the primary button.

Loading...

Toggle button Pattern

A toggle button can be built with any button including the standard EuiButton, EuiButtonEmpty , or EuiButtonIcon. Use state management to handle the visual differences for on and off.

Consider the followingn exception cases when building a toggle button.

  1. If your button changes its readable text, via children or aria-label, then there is no additional accessibility concern.
Loading...
  1. If your button only changes the visual appearance, you must add aria-pressed passing a boolean for the on and off states. All EUI button types provide a helper prop for this called isSelected.

Accessibility recommendation

Do not add aria-pressed or isSelected if you also change the readable text.

Loading...
Edit this page
Previous
Button group
Next
Guidelines
  • Split button Pattern
  • Toggle button Pattern
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic