# Icon Button

A Button that shows only an icon, with a required accessible label and a tooltip-ready target.

Source page: https://sproutboat.com/ikada/components/icon-button

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/icon-button.json
```
Or from the package: `import { IconButton } from "@sproutboat/ikada";`
## Usage
```tsx
import { IconButton } from "@/components/ikada/icon-button";

<IconButton label="Refresh" variant="secondary">
  <RefreshIcon />
</IconButton>
```
## Examples
### Variants
Ghost is the default: icon buttons sit in toolbars and rows. The label is the name and the tooltip.
```tsx
<IconButton label="Refresh" variant="primary">
  <RefreshIcon />
</IconButton>
<IconButton label="Copy" variant="secondary">
  <CopyIcon />
</IconButton>
<IconButton label="More">
  <MoreIcon />
</IconButton>
<IconButton label="Delete" variant="danger">
  <TrashIcon />
</IconButton>
```
### Sizes

```tsx
<IconButton label="Refresh (sm)" size="sm" variant="secondary">
  <RefreshIcon />
</IconButton>
<IconButton label="Refresh (md)" size="md" variant="secondary">
  <RefreshIcon />
</IconButton>
<IconButton label="Refresh (lg)" size="lg" variant="secondary">
  <RefreshIcon />
</IconButton>
```
### Without a tooltip
Set tooltip={false} when a parent already explains the button. The label is still its accessible name.
```tsx
<IconButton label="Copy deploy URL" tooltip={false}>
  <CopyIcon />
</IconButton>
```
### Disabled

```tsx
<IconButton label="Delete" variant="danger" disabled>
  <TrashIcon />
</IconButton>
```
## Props
### IconButtonProps
Also takes every prop of `Omit<ButtonProps, "children" | "aria-label">`.
| Prop | Type | Description |
| --- | --- | --- |
| label | `string` | Required. Becomes the accessible name and the tooltip text. |
| children | `ReactNode` | The icon. The accessible name comes from `label`. |
| tooltip? | `boolean` | Set false when a parent already explains the button. Default `true`. |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| style? | `CSSProperties \| ((state: ButtonState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| variant? | `"danger" \| "primary" \| "secondary" \| "ghost" \| null` | Default `ghost`. |
| size? | `"sm" \| "md" \| "lg" \| null` |  |
| loading? | `boolean` | Shows a spinner, sets aria-busy, ignores clicks, keeps the width and focus. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/icon-button.tsx