# Icon button

A button that shows only an icon, for compact or frequently repeated actions. When space allows, prefer a [Button](/components/button.md) with a visible label.

```tsx
// demo.tsx
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';

export default function IconButtonDemo() {
  return (
    <IconButton aria-label="Workspace settings">
      <SettingsIcon />
    </IconButton>
  );
}
```

## Usage

```tsx
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';

<IconButton aria-label="Workspace settings">
  <SettingsIcon />
</IconButton>;
```

Icons are decorative by default, so the button needs an `aria-label`.

## Changing the label

When the action changes, update the icon and `aria-label` together.

```tsx
// toggle.tsx
import {VisibilityIcon, VisibilityOffIcon} from '@earendil-works/elanor-icons-react';
import {IconButton, Stack, Text} from '@earendil-works/elanor-react';
import {useState} from 'react';

export default function IconButtonToggle() {
  const [visible, setVisible] = useState(false);

  return (
    <Stack direction="row" align="center" gap="small">
      <IconButton
        aria-label={visible ? 'Hide API key' : 'Show API key'}
        onClick={() => setVisible(!visible)}
      >
        {visible ? <VisibilityOffIcon /> : <VisibilityIcon />}
      </IconButton>
      <Text render={<span />}>{visible ? 'sk-live-2048' : '••••••••••••'}</Text>
    </Stack>
  );
}
```

## Disabled

```tsx
// disabled.tsx
import {SettingsIcon} from '@earendil-works/elanor-icons-react';
import {IconButton} from '@earendil-works/elanor-react';

export default function IconButtonDisabled() {
  return (
    <IconButton aria-label="Workspace settings" disabled>
      <SettingsIcon />
    </IconButton>
  );
}
```

## API

### `IconButton`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `'submit' \| 'reset' \| 'button'` | `'button'` |  |

Also accepts Base UI [`Button`](https://base-ui.com/react/components/button.md) props.