Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • 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
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • 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