Split button

Split buttons combine a primary and secondary action into a visual button group. The main button performs the most common action, while the secondary button may perform an additional action or open a dropdown popover with related secondary actions. This pattern is ideal when you have one primary action that users perform frequently, along with one or several related alternatives.

EuiSplitButton is composed of two sub-components:

• EuiSplitButton.ActionPrimary: The main action button
• EuiSplitButton.ActionSecondary: The secondary action button

EuiSplitButton.ActionPrimary is by default rendered as a standard button with text, but it can be rendered as icon button by setting isIconOnly={true} and passing a iconType. EuiSplitButton.ActionSecondary is always rendered as an icon button.

EuiSplitButton only allows EuiSplitButton.ActionPrimary and EuiSplitButton.ActionSecondary as children.

You may use wrappers that don't change the DOM structure (like React.memo() or React.lazy()) to wrap these components. Other component wrappers are not supported and will break styling.

Loading...

Both sub-components accept the same props as EuiButton and EuiButtonIcon respectively. Some specific props are however controlled by the parent EuiSplitButton component to ensure expected visual output. These common props are: size, color, and fill. Additionally, you can control isDisabled and isLoading states for both actions combined as well as individually. The parent prop will always override the sub-component prop when both are provided.

Tooltips and popovers

To apply a tooltip to either action, you can pass tooltipProps which will render an EuiToolTip wrapping the button. For EuiSplitButton.ActionSecondary only, you can also pass popoverProps to render an EuiPopover.

Loading...

Usage

Accessibility

Using <EuiSplitButton.ActionSecondary> or <EuiSplitButton.ActionPrimary isIconOnly> requires aria-label to be set to ensure an accessible label for the icon-only button is available to screen readers.

Single primary and secondary action

When there is only one primary and one secondary action, the onClick handler can be passed directly to each action and perform individual actions for each action button.

Multiple secondary actions

When there are multiple secondary actions use the popoverProps prop on EuiSplitButton.ActionSecondary to display your custom subset of secondary actions in a EuiPopover component.

Props

EuiSplitButton

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	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 isDisabled# ↦	Description and type Controls the disabled behavior via the native disabled attribute. Type: boolean ↦	Default value ↵
Prop hasAriaDisabled# ↦	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native disabled attribute to aria-disabled to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: boolean ↦	Default value ↵
Prop size# ↦	Description and type Type: "s" | "m" ↦	Default value m ↵
Prop color# ↦	Description and type Type: "text" | "accent" | "accentSecondary" | "primary" | "success" | "warning" | "danger" | "neutral" | "risk" ↦	Default value primary ↵
Prop fill# ↦	Description and type Type: boolean ↦	Default value false ↵
Prop isLoading# ↦	Description and type Type: boolean ↦	Default value ↵

𐘂𐘂

EuiSplitButtonActionPrimary

Extends AnchorHTMLAttributes, ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop isDisabled# ↦	Description and type Controls the disabled behavior via the native disabled attribute. Type: boolean ↦	Default value ↵
Prop hasAriaDisabled# ↦	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native disabled attribute to aria-disabled to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: boolean ↦	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 Overall size of button. Matches the sizes of other EuiButtons Type: "s" | "xs" | "m" ↦	Default value ↵
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 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: string ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	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 Size of the icon only. This will not affect the overall size of the button Type: "s" | "m" | "l" | "xl" | "xxl" | "original" ↦	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 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. Do not use the following colors for standalone buttons directly, they exist to serve other components: accent warning neutral risk Type: "text" | "accent" | "accentSecondary" | "primary" | "success" | "warning" | "danger" | "neutral" | "risk" ↦	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 ↵
Prop tooltipProps# ↦	Description and type Enables rendering an EuiToolTip with the passed props. Type: Partial<Omit<EuiToolTipProps, "children">> ↦	Default value ↵
Prop isIconOnly# ↦	Description and type Toggles the render as EuiButtonIcon. 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 ↵

𐘂𐘂

EuiSplitButtonActionSecondary

Extends AnchorHTMLAttributes, ButtonHTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop iconType# ↦	Description and type Type: IconType ↦	Default value Required ↵
Prop isDisabled# ↦	Description and type Controls the disabled behavior via the native disabled attribute. Type: boolean ↦	Default value ↵
Prop hasAriaDisabled# ↦	Description and type NOTE: Beta feature, may be changed or removed in the future Changes the native disabled attribute to aria-disabled to preserve focusability. This results in a semantically disabled button without the default browser handling of the disabled state. Use e.g. when a disabled button should have a tooltip. Type: boolean ↦	Default value ↵
Prop href# ↦	Description and type Type: string ↦	Default value ↵
Prop type# ↦	Description and type Type: string ↦	Default value ↵
Prop color# ↦	Description and type Any of the named color palette options. Do not use the following colors for standalone buttons directly, they exist to serve other components: accent warning neutral risk Type: "text" | "accent" | "accentSecondary" | "primary" | "success" | "warning" | "danger" | "neutral" | "risk" ↦	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 aria-labelledby# ↦	Description and type Identifies the element (or elements) that labels the current element. @see aria-describedby. Type: string ↦	Default value ↵
Prop size# ↦	Description and type Overall size of button. Matches the sizes of other EuiButtons Type: "s" | "xs" | "m" ↦	Default value ↵
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 ↵
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 ↵
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 ↵
Prop tooltipProps# ↦	Description and type Enables rendering an EuiToolTip with the passed props. Type: Partial<Omit<EuiToolTipProps, "children">> ↦	Default value ↵
Prop popoverProps# ↦	Description and type Enables rendering an EuiPopover with the passed props. When passed the secondary action icon will be fixed to arrowDown. Type: Omit<Readonly<Props>, "button"> ↦	Default value ↵

𐘂𐘂