eui documentation
  1. Components
  2. EuiIconButtonComponent

File

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

Description

A clickable button component that displays only an icon without text. Provides visual feedback states and supports various sizing and styling options. Commonly used in toolbars, navigation bars, and compact UI layouts where space is limited.

Basic icon button

Example :
<eui-icon-button
  icon="edit"
  ariaLabel="Edit item"
  (buttonClick)="onEdit()">
</eui-icon-button>

With state variant

Example :
<eui-icon-button
  icon="delete"
  euiDanger
  size="l"
  ariaLabel="Delete item">
</eui-icon-button>

Accessibility

  • Always provide descriptive ariaLabel for screen readers
  • Button is keyboard accessible via Tab and Enter/Space
  • Focus states are clearly visible

Notes

  • Use hasNoPadding for compact layouts or icon-only toolbars
  • Apply euiRounded for circular button shape
  • Set euiDisabled to prevent interaction
  • Choose between hasFocusHoverColor and hasFocusHoverBg for hover effects

Implements

OnInit

Metadata

HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiSuccess euiInfo euiWarning euiDanger euiVariant euiSizeS 
selector eui-icon-button
imports EUI_ICON
styleUrls ./eui-icon-button.component.scss
templateUrl ./eui-icon-button.component.html

Index

Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string
Default value : 'eUI Icon button'

Accessible label for screen readers describing the button's purpose.
euiDisabled
Type : boolean
Default value : false

Disables the button, preventing interaction and applying disabled styling. Default: false
euiRounded
Type : boolean
Default value : false

Applies rounded corners to the button shape instead of default square corners. Default: false
fillColor
Type : string

CSS color value to apply as the icon fill color. Overrides default theme colors.
hasFocusHoverBg
Type : boolean
Default value : true

Applies background color change on focus and hover states. Automatically disabled when hasFocusHoverColor is true. Default: true
hasFocusHoverColor
Type : boolean
Default value : false

Applies color change on focus and hover states instead of background change. Mutually exclusive with hasFocusHoverBg. Default: false
hasNoPadding
Type : boolean
Default value : false

Removes internal padding from the button, allowing the icon to fill the entire button area. Default: false
hasOverflowHover
Type : boolean
Default value : false

Enables hover state that expands beyond the button boundaries, typically used in dense layouts. Default: false
icon
Type : string

The name of the icon to display from the eUI icon library.
iconUrl
Type : string

URL path to a custom icon image. Used when displaying icons not available in the eUI icon library.
size
Type : "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"
Default value : 'm'

Controls the icon dimensions. Default: 'm'
tabindex
Type : number
Default value : 0

Tab order position for keyboard navigation. Set to -1 to remove from tab sequence. Default: 0

Outputs

buttonClick
Type : EventEmitter

Emitted when the button is clicked. Payload contains the native click Event object.

HostBindings

class
Type : string

Methods

onClick
onClick(event: Event)
Parameters :
Name Type Optional
event Event No
Returns : void

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""