eui documentation
  1. Components
  2. EuiButtonComponent

File

packages/components/eui-button/eui-button.component.ts

Description

A versatile button component that supports various states, sizes, and visual styles. It can be used as a native <button> or <a> element while preserving consistent EUI behavior and styling.

Basic buttons with variants

Example :
<button euiButton>Default</button>
<button euiButton euiPrimary>Primary</button>
<button euiButton euiSecondary>Secondary</button>
<button euiButton euiSuccess>Success</button>

Icon button

Example :
<button euiButton euiIconButton aria-label="Notifications">
  <eui-icon-svg icon="bell:outline"></eui-icon-svg>
</button>

CTA and block buttons

Example :
<button euiButton euiCTAButton>Call to Action</button>
<button euiButton euiBlockButton>Full Width</button>

Size variants

Example :
<button euiButton euiSizeS>Small</button>
<button euiButton euiSizeM>Medium</button>
<button euiButton euiSizeL>Large</button>

Disabled and checked states

Example :
<button euiButton [euiDisabled]="true">Disabled</button>
<button euiButton [isChecked]="true">Checked</button>

As link

Example :
<a euiButton href="/page">Link Button</a>
Example :
onButtonClick(button: EuiButtonComponent): void {
  console.log('Button clicked:', button);
}

Accessibility

  • Native button/anchor semantics preserved for screen readers
  • Keyboard accessible with Enter/Space (button) or Enter (link)
  • euiIconButton requires aria-label for icon-only buttons
  • Disabled state prevents interaction and is announced to screen readers
  • Focus ring visible by default (remove with hasNoFocusRing if alternative focus indicator exists)
  • isChecked state is visually indicated and announced

Notes

  • Use on <button> or <a> elements via euiButton attribute
  • Color variants: euiPrimary, euiBranding, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger, euiInverse
  • Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL
  • euiBasicButton removes background for minimal styling
  • euiCTAButton applies prominent call-to-action styling
  • euiBlockButton makes button full-width
  • euiIconButton optimizes layout for icon-only content
  • euiAvatarButton styles for avatar dropdown triggers
  • euiLineWrap allows multi-line button text
  • isCompact reduces padding and dimensions
  • euiOutline applies outline/ghost styling
  • euiRounded applies rounded corners
  • euiResponsive adjusts sizing based on viewport
  • euiStart/euiEnd aligns content within button
  • buttonClick event emits component instance on click

Metadata

changeDetection ChangeDetectionStrategy.OnPush
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiBranding euiSecondary euiSuccess euiInfo euiWarning euiDanger euiInverse euiVariant euiSizeXS euiSizeS euiSizeM euiSizeL euiSizeVariant euiOutline euiRounded euiResponsive euiStart euiEnd 
selector button[euiButton], a[euiButton]
templateUrl ./eui-button.component.html
styleUrl ./eui-button.scss

Index

Properties
Inputs
Outputs
HostBindings
HostListeners
Accessors

Inputs

e2eAttr
Type : string
Default value : 'eui-button'
euiAvatarButton
Type : boolean
Default value : false
euiBasicButton
Type : boolean
Default value : false
euiBlockButton
Type : boolean
Default value : false
euiCTAButton
Type : boolean
Default value : false
euiDisabled
Type : boolean

Controls the disabled state of the button When true, adds the disabled attribute and prevents interaction
euiIconButton
Type : boolean
Default value : false
euiLineWrap
Type : boolean
Default value : false
hasNoFocusRing
Type : boolean
Default value : false
id
Type : string
isChecked
Type : boolean

Controls the checked state of the button When true, applies accent styling
isCompact
Type : boolean
Default value : false

Outputs

buttonClick
Type : EventEmitter<EuiButtonComponent>

Event emitted when the button is clicked Emits the button component instance

HostBindings

class
Type : string

Computes and returns the CSS classes for the button based on its current state

HostListeners

click
click()

Click event handler that emits the buttonClick event

Properties

Public baseStatesDirective
Type : BaseStatesDirective
Default value : inject(BaseStatesDirective)

Accessors

cssClasses
getcssClasses()

Computes and returns the CSS classes for the button based on its current state

Returns : string
isChecked
getisChecked()

Controls the checked state of the button When true, applies accent styling

Returns : boolean
setisChecked(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void
euiDisabled
geteuiDisabled()

Controls the disabled state of the button When true, adds the disabled attribute and prevents interaction

Returns : boolean
seteuiDisabled(value: BooleanInput)
Parameters :
Name Type Optional
value BooleanInput No
Returns : void

results matching ""

    No results matching ""