# IconButton

> Square, icon-only button with the same variants, sizes, focus ring and touch density as `Button`.

Source: https://ui.jcsoftdev.com/docs/components/icon-button

Square, icon-only button with the same variants, sizes, focus ring and touch density as
`Button`. The control grows with `data-density="touch"` because its box is the Button height.

## Import

```ts
import { IconButton } from "@jcsoftdev/ui/atoms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/icon-button`.

## Usage

```tsx
<IconButton label="Delete row">
  <Trash aria-hidden="true" />
</IconButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  | Accessible name, announced in place of the icon. Required: an icon alone names nothing. |
| `variant` | `"danger" \| "primary" \| "secondary" \| "ghost"` | `"secondary"` |  |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `loading` | `boolean` |  | Swaps the icon for a spinner and makes the button busy like `Button` `loading`: it keeps focus, ignores clicks and announces the localized `loading` string. |
| `asChild` | `boolean` |  | Render the child element (via Slot) instead of a `<button>`, e.g. a link wrapping the icon. |
| `children` * | `ReactNode` |  | The icon (an `svg`, an `Icon`, or any element). It is decorative: `label` names the button. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-iconbutton--default)
- [Variants And Sizes](/storybook/?path=/story/atoms-iconbutton--variants-and-sizes)
- [Loading](/storybook/?path=/story/atoms-iconbutton--loading)
- [Disabled](/storybook/?path=/story/atoms-iconbutton--disabled)

## Source

`packages/ui/src/atoms/icon-button/icon-button.tsx`