Icon button

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.

Accessibility requirement

EuiButtonIcon requires an aria-label to express the meaning to screen readers.

Loading...

Icon color

Icons, within the button, inherit the color set on EuiButtonIcon and can not be customized.

Loading...

Props

EuiButtonIcon

Extends AnchorHTMLAttributes, ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

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. Type: "primary" | "text" | "accent" | "accentSecondary" | "success" | "warning" | "danger" ↦	Default value primary ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop aria-labelledby# ↦	Description and type Identifies the element (or elements) that labels the current element. @see aria-describedby. Type: string ↦	Default value ↵
Prop isDisabled# ↦	Description and type Type: boolean ↦	Default value ↵
Prop size# ↦	Description and type Overall size of button. Matches the sizes of other EuiButtons Type: "xs" | "s" | "m" ↦	Default value xs ↵
Prop iconSize# ↦	Description and type Size of the icon only. This will not affect the overall size of the button Type: "s" | "m" | "l" | "xl" | "xxl" | "original" ↦	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 display# ↦	Description and type Sets the display style for matching other EuiButton types. base is equivalent to a typical EuiButton fill is equivalent to a filled EuiButton empty (default) is equivalent to an EuiButtonEmpty Type: "base" | "fill" | "empty" ↦	Default value empty ↵
Prop isLoading# ↦	Description and type Disables the button and changes the icon to a loading spinner Type: 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 ↵

𐘂𐘂