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

- onClick

###### Inputs

- ariaLabel
- euiDisabled
- fillColor
- isDirectionForward
- isExpanded
- size

###### Outputs

- buttonClick

###### HostBindings

- class

###### Accessors

- cssClasses

### 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
get `cssClasses()`

# results matching ""

# No results matching ""