import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs/blocks";

import * as stories from "./icon-button.stories";

<Meta of={stories} />

```ts
import { IconButtonModule } from "@bitwarden/components";
```

<Title />
<Description />

<Primary />
<Controls />

## Usage

Icon buttons can be found in other components such as: the
[banner](?path=/docs/component-library-banner--docs)
[dialog](?path=/docs/component-library-dialogs--docs), and
[table](?path=/docs/component-library-table--docs).

## Styles

### Main

Used for general icon buttons appearing on the theme’s main `background`

<Canvas of={stories.Main} />

### Muted

Used for low emphasis icon buttons appearing on the theme’s main `background`

<Canvas of={stories.Muted} />

### Contrast

Used on a theme’s colored or contrasting backgrounds such as in the navigation or on toasts and
banners.

<Canvas of={stories.Contrast} />

### Danger

Danger is used for “trash” actions throughout the experience, most commonly in the bottom right of
the dialog component.

<Canvas of={stories.Danger} />

### Primary

Used in place of the main button component if no text is used. This allows the button to display
square.

<Canvas of={stories.Primary} />

### Nav Contrast

Used on the side nav background that is dark in both light theme and dark theme.

<Canvas of={stories.NavContrast} />

## Sizes

There are 2 sizes for the icon button: `small` and `default`.

Default is typically used for most instances. Small is used if the implementation needs a variant
with less padding around the icon, such as in the navigation component.

### Small

<Canvas of={stories.Small} />

### Default

<Canvas of={stories.Default} />

## Accessibility

Follow guidelines outlined in the [Button docs](?path=/docs/component-library-button--doc)

label input will be used to set the `aria-label` attributes on the button. This is for accessibility
purposes, as it provides a text alternative for the icon button.