Icon Button

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

import * as IconButtonStories from './IconButton.stories';

<Meta of={IconButtonStories} name='Usage' />

<Title />

## Purpose

The PDS Icon Button, copied as the base for this proposal. It adds the agentic treatment: an AI-gradient replacing the border color. It also adds a `primary` variant (filled like a primary Button) and an `isWorking` state, which together make the Send button of a chat input.

## Usage

- `variant="primary"` is for the main action of a toolbar, such as Send. Send has three states, made from the props the button already has: `iconName="paperPlane"` to send, `isWorking` while the request is in flight (a spinner, disabled, `aria-busy`), and `iconName="stop"` to stop a running response. Update `ariaLabel` with the state.
- `isAgentic` and `hasBorder` do not apply to `primary`.

## Implementation

See the table below for the available props. The other stories show every variant and state.

<hr />

<Canvas of={IconButtonStories.Default} />
<Controls of={IconButtonStories.Default} />