Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
    • Breadcrumbs
    • Buttons
      • Button
      • Empty button
      • Icon button
      • Button group
      • Patterns
      • Guidelines
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tree view
  • Display
  • Forms
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Navigation
  • Buttons
  • Empty button

Empty button

Use EuiButtonEmpty when you want to reduce the importance of the button, but still want to align it to the rest of the buttons. It is also the only button component that supports down to size

xs.

Loading...

Flush empty button

By default, buttons contain padding. Apply the flush property in cases where precise alignment and spacing is desired. This situation can arise when EuiButtonEmpty appears within a horizontal list of buttons such as a menu.

Loading...

Props

EuiButtonEmpty

Extends AnchorHTMLAttributes, ButtonHTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
Prop
↦
Description and type
↦
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
size#
↦
Description and type
Type: "xs" | "s" | "m"
↦
Default value
m
↵
Prop
flush#
↦
Description and type

Ensure the text of the button sits flush to the left, right, or both sides of its container

Type: "left" | "right" | "both"
↦
Default value
↵
Prop
isDisabled#
↦
Description and type

disabled is also allowed

Type: boolean
↦
Default value
↵
Prop
isLoading#
↦
Description and type

Force disables the button and changes the icon to a loading spinner

Type: boolean
↦
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
href#
↦
Description and type
Type: string
↦
Default value
↵
Prop
target#
↦
Description and type
Type: string
↦
Default value
↵
Prop
rel#
↦
Description and type
Type: string
↦
Default value
↵
Prop
type#
↦
Description and type
Type: "button" | "reset" | "submit"
↦
Default value
button
↵
Prop
buttonRef#
↦
Description and type
Type: Ref<HTMLAnchorElement | HTMLButtonElement>
↦
Default value
↵
Prop
contentProps#
↦
Description and type

Object of props passed to the <span> wrapping the button's content

Type: CommonProps & EuiButtonDisplayContentType
↦
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
left
↵
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
m
↵
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
onClick#
↦
Description and type
Type: MouseEventHandler<HTMLAnchorElement> | MouseEventHandler<HTMLButtonElement>
↦
Default value
↵
𐘂𐘂
Edit this page

Previous
Button
Next
Icon button
  • Flush empty button
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic