Button
EUI provides many types, colors and configurations of buttons. The one best suited for you context depends on placement, prominence, and state. For primary and secondary actions it is best to use the basic EuiButton. For tertiary or low prominence actions, use EuiButtonEmpty.
Be sure to read the full
button usage guidelines.Basic button
The most standard button component is EuiButton which comes in two styles and two sizes. The
fill style should be reserved for the main action and limited in number for a single page. Use the small size (size="s") when placing buttons into smaller containers like popovers.When using colors other than primary, be sure that either the words or an icon also represents the status. For instance, don't rely on color alone to represent dangerous actions but use words like "Delete" not "Confirm". The text and accent colors should be used sparingly as they can easily be confused with other states like disabled and danger.
Empty button
Use EuiButtonEmpty when you want to reduce the importance of the button, but still want to align it to the rest of the buttons. It is also the only button component that supports down to size xs.
Flush empty button
When aligning EuiButtonEmpty components to the left or the right, you should make sure they’re flush with the edge of their container, so that they’re horizontally aligned with the other content in the container.
Buttons with icons
All button components accept an iconType which must be an acceptable EuiIcon type. Multi-color icons like app icons will be converted to single color. Icons can be displayed on the opposite side by passing iconSide="right".
Icon buttons
An EuiButtonIcon is a button that only contains an icon (no text). Use the display and size props to match the appearance of your EuiButtonIcon to other standard buttons. By default they will appear as xs, empty buttons.
EuiButtonIcon requires an aria-label to express the meaning to screen readers.
Buttons as links
Every button component accepts either an href (rendered as an <a>) or an onClick (rendered as a <button>). While they also accept both props to be applied simultaneously to support certain routing mechansims, it is not usually recommended. For more specific information on how to integrate EUI buttons with react-router, see this wiki page.
If you are creating a purely text-based link, like the one in the previous paragraph, use EuiLink instead.
Loading state
Setting the isLoading prop to true will add the loading spinner or swap the existing icon for the loading spinner and set the button to disabled. It is good practice to also rename the button to "Loading…".
Split buttons
EUI does not support split buttons specifically. Instead, we recommend using separate buttons for the main and overflow actions. You can achieve this by simply using the display and size props EuiButtonIcon to match that of the primary action button.
Toggle buttons
You can create a toggle button with any button type like the standard EuiButton, EuiButtonEmpty, or EuiButtonIcon. Use state management to handle the visual differences for on and off. Though there are two exclusive situations to consider.
- If your button changes its readable text, via children or
aria-label, then there is no additional accessibility concern.
- If your button only changes the visual appearance, you must add
aria-pressedpassing a boolean for the on and off states. All EUI button types provide a helper prop for this calledisSelected.
Do not add aria-pressed or isSelected if you also change the readable text.
Button groups
An EuiButtonGroup is for indicating selection only. They utilize the type="single" or "multi" prop to determine whether multiple or only single selections are allowed per group.
In order for groups to be properly read as groups with a title, the legend prop is required. This is only for accessibility, however, so it will be visibly hidden.
Icon only button groups
If you're just displaying a group of icons, add the prop isIconOnly.
Button groups in forms
When using button groups within compressed forms, match the form elements by adding buttonSize="compressed". Compressed groups should always be fullWidth so they line up nicely in their small container unless they are icon only.
For a more detailed example of how to integrate with forms, see the "Complex example" on the compressed forms page.
Button group tooltips
Buttons within a button group will automatically display a default browser tooltip containing the button label text. This can be customized or unset via the title property in your options button configuration.
To instead display an EuiToolTip around your button(s), pass the toolTipContent property. You can also use toolTipProps to customize tooltip placement, title, and any other prop that EuiToolTip accepts.
Props
EuiButton
Prop | Description and type | Default value |
|---|---|---|
Prop href# | Description and type Type: string | Default value |
Prop element# | Description and type Type: "a" | "button" | "span" | Default value |
Prop size# | Description and type Use size "s" | "m" | Default value m |
Prop isSelected# | Description and type Applies the boolean state as the boolean | Default value |
Prop fullWidth# | Description and type Extends the button to 100% width boolean | Default value |
Prop minWidth# | Description and type Override the default minimum width false | MinWidth<string | number> | Default value |
Prop isLoading# | Description and type Force disables the button and changes the icon to a loading spinner boolean | Default value |
Prop contentProps# | Description and type Object of props passed to the wrapping the button's content CommonProps & EuiButtonDisplayContentType | Default value |
Prop style# | Description and type Type: CSSProperties | Default value |
Prop type# | Description and type Type: "button" | "reset" | "submit" | Default value |
Prop iconType# | Description and type Any IconType | Default value |
Prop iconSide# | Description and type Can only be one side ButtonContentIconSide | Default value |
Prop textProps# | Description and type Object of props passed to the This span wrapper can be removed by passing false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) | Default value |
Prop iconSize# | Description and type Type: "s" | "m" | Default value |
Prop isDisabled# | Description and type
boolean | Default value |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop fill# | Description and type Make button a solid color for prominence boolean | Default value |
Prop color# | Description and type Any of the named color palette options. "text" | "accent" | "primary" | "success" | "warning" | "danger" | Default value primary |
Prop onClick# | Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> | Default value |
Prop buttonRef# | Description and type Type: Ref<HTMLAnchorElement> | Ref<HTMLButtonElement> | Default value |
EuiButtonGroup
Prop | Description and type | Default value |
|---|---|---|
Prop legend# | Description and type A hidden group title (required for accessibility) string | Default value Required |
Prop onChange# | Description and type Single: Returns the ((id: string, value?: any) => void) | ((id: string) => void) | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop buttonSize# | Description and type Typical sizing is "s" | "m" | "compressed" | Default value s |
Prop isDisabled# | Description and type Type: boolean | Default value false |
Prop isFullWidth# | Description and type Expands the whole group to the full width of the container. boolean | Default value false |
Prop isIconOnly# | Description and type Hides the label to only show the boolean | Default value false |
Prop color# | Description and type Any of the named color palette options. "text" | "accent" | "primary" | "success" | "warning" | "danger" | Default value text |
Prop type# | Description and type Actual type is "single" | "multi" | Default value single |
Prop options# | Description and type An array of #EuiButtonGroupOptionProps EuiButtonGroupOptionProps[] | Default value [] |
Prop name# | Description and type @deprecated No longer needed. You can safely remove this prop entirely string | Default value |
Prop idSelected# | Description and type Styles the selected option to look selected (usually with string | Default value |
Prop idToSelectedMap# | Description and type A map of { [id: string]: boolean; } | Default value {} |
EuiButtonEmpty
Prop | Description and type | Default value |
|---|---|---|
Prop color# | Description and type Any of the named color palette options. "text" | "accent" | "primary" | "success" | "warning" | "danger" | Default value primary |
Prop size# | Description and type Type: "xs" | "s" | "m" | Default value m |
Prop flush# | Description and type Ensure the text of the button sits flush to the left, right, or both sides of its container "left" | "right" | "both" | Default value |
Prop isDisabled# | Description and type
boolean | Default value |
Prop isLoading# | Description and type Force disables the button and changes the icon to a loading spinner boolean | Default value |
Prop isSelected# | Description and type Applies the boolean state as the boolean | Default value |
Prop href# | Description and type Type: string | Default value |
Prop target# | Description and type Type: string | Default value |
Prop rel# | Description and type Type: string | Default value |
Prop type# | Description and type Type: "button" | "reset" | "submit" | Default value button |
Prop buttonRef# | Description and type Type: Ref<HTMLAnchorElement | HTMLButtonElement> | Default value |
Prop contentProps# | Description and type Object of props passed to the CommonProps & EuiButtonDisplayContentType | Default value |
Prop iconType# | Description and type Any IconType | Default value |
Prop iconSide# | Description and type Can only be one side ButtonContentIconSide | Default value left |
Prop textProps# | Description and type Object of props passed to the This span wrapper can be removed by passing false | (HTMLAttributes<HTMLSpanElement> & CommonProps & { ref?: Ref<HTMLSpanElement>; 'data-text'?: string; }) | Default value |
Prop iconSize# | Description and type Type: "s" | "m" | Default value m |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop onClick# | Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> | Default value |
EuiButtonIcon
Prop | Description and type | Default value |
|---|---|---|
Prop iconType# | Description and type Type: IconType | Default value Required |
Prop href# | Description and type Type: string | Default value |
Prop type# | Description and type Type: string | Default value button |
Prop color# | Description and type Any of the named color palette options. "text" | "accent" | "primary" | "success" | "warning" | "danger" | Default value primary |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop aria-labelledby# | Description and type Identifies the element (or elements) that labels the current element. string | Default value |
Prop isDisabled# | Description and type Type: boolean | Default value |
Prop size# | Description and type Overall size of button. "xs" | "s" | "m" | Default value xs |
Prop iconSize# | Description and type Size of the icon only. "s" | "m" | "l" | "xl" | "xxl" | "original" | Default value m |
Prop isSelected# | Description and type Applies the boolean state as the boolean | Default value |
Prop display# | Description and type Sets the display style for matching other EuiButton types. "fill" | "base" | "empty" | Default value empty |
Prop isLoading# | Description and type Disables the button and changes the icon to a loading spinner boolean | Default value |
Prop className# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop onClick# | Description and type Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement> | Default value |
Prop buttonRef# | Description and type Type: Ref<HTMLAnchorElement> | Ref<HTMLButtonElement> | Default value |