eui documentation
  1. Components
  2. EuiIconButtonExpanderComponent

File

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

Description

A button component that displays an icon indicating expandable/collapsible state, typically used for accordion panels, tree nodes, or disclosure widgets. The icon rotates based on the expanded state and can be oriented in forward or reverse direction.

Basic expander button

Example :
<eui-icon-button-expander
  [isExpanded]="expanded"
  ariaLabel="Toggle section"
  (buttonClick)="expanded = !expanded">
</eui-icon-button-expander>

Forward direction (horizontal expansion)

Example :
<eui-icon-button-expander
  [isExpanded]="sidebarOpen"
  [isDirectionForward]="true"
  ariaLabel="Toggle sidebar">
</eui-icon-button-expander>

Accessibility

  • Provide descriptive ariaLabel indicating expand/collapse action
  • Visual rotation clearly indicates state change
  • Keyboard accessible via Tab and Enter/Space

Notes

  • Default direction is downward (for vertical expansion)
  • Set isDirectionForward="true" for horizontal/sidebar expansion
  • Icon automatically rotates based on isExpanded state
  • Commonly paired with eui-fieldset or custom collapsible sections

Metadata

changeDetection ChangeDetectionStrategy.OnPush
selector eui-icon-button-expander
imports EUI_ICON
styleUrls ./eui-icon-button-expander.component.scss
templateUrl ./eui-icon-button-expander.component.html

Index

Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string

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

Disables the button interaction when true. Default is false.
fillColor
Type : string

The fill color of the icon. Accepts any valid CSS color value.
isDirectionForward
Type : boolean
Default value : false

Controls the rotation direction of the icon. When true, the icon points forward (right) when collapsed; when false, it points downward when collapsed. Default is false.
isExpanded
Type : boolean
Default value : false

Controls the visual state of the expander icon. When true, the icon rotates to indicate expanded state. Default is false.
size
Type : "2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"
Default value : 'm'

The size of the icon button. Default is 'm'.

Outputs

buttonClick
Type : EventEmitter

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

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 ""