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.

EuiButton

EuiButtonEmpty

EuiButtonIcon

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.

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".

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-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.

Props

EuiButton

Extends AnchorHTMLAttributes, ButtonHTMLAttributes


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` in confined spaces Type: `"s" \| "m"`	Default value `m`
Prop isSelected#	Description and type Applies the boolean state as the `aria-pressed` property to create a toggle button. Only use when the readable text does not change between states. Type: `boolean`	Default value
Prop fullWidth#	Description and type Extends the button to 100% width Type: `boolean`	Default value
Prop minWidth#	Description and type Override the default minimum width Type: `false \| MinWidth<string \| number>`	Default value
Prop isLoading#	Description and type Force disables the button and changes the icon to a loading spinner Type: `boolean`	Default value
Prop contentProps#	Description and type Object of props passed to the wrapping the button's content Type: `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 `type` accepted by EuiIcon Type: `IconType`	Default value
Prop iconSide#	Description and type Can only be one side `left` or `right` Type: `ButtonContentIconSide`	Default value
Prop textProps#	Description and type Object of props passed to the `<span>` wrapping the content's text/children only (not icon) This span wrapper can be removed by passing `textProps={false}`. Type: `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 `disabled` is also allowed 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. @see aria-labelledby. 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 fill#	Description and type Make button a solid color for prominence Type: `boolean`	Default value
Prop color#	Description and type Any of the named color palette options. Type: `"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