# Shadcn Hamburger Toggle

> Animated hamburger / close toggle button

- Type: example, free and open source (MIT)
- Component: [Button](https://reui.io/components/button.md)
- Page: https://reui.io/components/button/c-button-43
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/button.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/button.md
- MCP: `get_example("c-button-43")`
- Registry item: https://reui.io/r/styles/base-nova/c-button-43.json
- Uses: Button

## Best for

A square menu control whose bars rotate into an X and back, with aria-expanded kept in sync

## Agent notes

- `open` is local state that swaps the icon, the label and aria-expanded but opens nothing; lift it to the menu or sheet it controls

## Install

```bash
npx shadcn@latest add @reui/c-button-43
```

## About Shadcn Button

### When to use

- Page, form and dialog actions in primary, secondary, outline, ghost, destructive and link weights
- Icon only controls and sign in rows, such as close, search, copy, menu or theme switches and provider logos
- Actions that report state or carry extras, such as a spinner, a saved check, a count or a shortcut

### When not to use

- Several related actions joined edge to edge as one segmented control: use [Button Group](https://reui.io/components/button-group.md) (`get_component("button-group")`)
- A control that stays pressed on or off, such as bold in an editor toolbar: use [Toggle](https://reui.io/components/toggle.md) (`get_component("toggle")`)
- An action attached inside a text field, such as a search submit or a clear: use [Input Group](https://reui.io/components/input-group.md) (`get_component("input-group")`)

### Agent notes

- The base twin `Button` defaults to `type` button, so pass `type` submit inside a form; the radix twin renders a plain `button` that submits by default
- A link needs its anchor passed through `render` with `nativeButton` false on the base twin, or wrapped with `asChild` on the radix twin
- Set `data-icon` to inline-start or inline-end on a leading or trailing icon so the text sizes trim the padding on that side

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.