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.

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

Loading...

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

Loading...

Using href and onClick

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

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: "primary" | "text" | "accent" | "accentSecondary" | "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 ↵

𐘂𐘂