# EuiIconButtonExpanderComponent

**Type:** component

<p>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.</p>
<h3>Basic expander button</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-button-expander
  [isExpanded]=&quot;expanded&quot;
  ariaLabel=&quot;Toggle section&quot;
  (buttonClick)=&quot;expanded = !expanded&quot;&gt;
&lt;/eui-icon-button-expander&gt;</code></pre></div><h3>Forward direction (horizontal expansion)</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-icon-button-expander
  [isExpanded]=&quot;sidebarOpen&quot;
  [isDirectionForward]=&quot;true&quot;
  ariaLabel=&quot;Toggle sidebar&quot;&gt;
&lt;/eui-icon-button-expander&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Provide descriptive <code>ariaLabel</code> indicating expand/collapse action</li>
<li>Visual rotation clearly indicates state change</li>
<li>Keyboard accessible via Tab and Enter/Space</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Default direction is downward (for vertical expansion)</li>
<li>Set <code>isDirectionForward=&quot;true&quot;</code> for horizontal/sidebar expansion</li>
<li>Icon automatically rotates based on <code>isExpanded</code> state</li>
<li>Commonly paired with eui-fieldset or custom collapsible sections</li>
</ul>


**Selector:** `eui-icon-button-expander`

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Accessible label for screen readers describing the button&#39;s purpose.</p>

- **euiDisabled**: `boolean` - <p>Disables the button interaction when true. Default is false.</p>

- **fillColor**: `string` - <p>The fill color of the icon. Accepts any valid CSS color value.</p>

- **isDirectionForward**: `boolean` - <p>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.</p>

- **isExpanded**: `boolean` - <p>Controls the visual state of the expander icon. When true, the icon rotates to indicate expanded state. Default is false.</p>

- **size**: `"2xs" | "xs" | "s" | "m" | "l" | "xl" | "2xl" | "3xl" | "4xl"` - <p>The size of the icon button. Default is &#39;m&#39;.</p>


## Outputs

- **buttonClick**: `EventEmitter` - <p>Emitted when the button is clicked. Payload is the native click Event.</p>

