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
iconSide="right".
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…".
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.
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. Do not use the following colors for standalone buttons directly,
"primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "neutral" | "risk" | 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 |