import {
  Canvas,
  Controls,
  Meta,
  Title,
  Subtitle,
} from '@storybook/addon-docs/blocks'
import * as ButtonStories from './Button.stories'
import { LifecycleTag } from '../../docs/components/LifecycleTag'

<Meta title="Blocks/Button" of={ButtonStories} />

<Title>Button</Title>
<Subtitle>Interactive buttons with various styles, sizes, and states.</Subtitle>
<LifecycleTag variant="Stable" />
**Component type:** Primitive

<Canvas of={ButtonStories.Default} layout="padded" sourceState="shown" />
<Controls of={ButtonStories.Default} />

## When to use

Use `Button` for standard labeled actions.

Use `ButtonIcon` when the action should be icon-only. Use `ButtonSet` when you
need to group related actions with consistent sizing and layout. If another
element should visually match a button, use `buttonVariants`.

## Import

```tsx
import { Button } from '@chainlink/blocks'
```

## Recommended pattern

For most product actions, the default `primary` variant is the right starting
point. Add `loading` when the action is in progress, and use `disabled` when
the action is temporarily unavailable.

```tsx
function SaveChangesButton({ isSaving }: { isSaving: boolean }) {
  return (
    <Button type="submit" loading={isSaving}>
      Save changes
    </Button>
  )
}
```

## Rendered Element

The `Button` component renders a `<button>` element by default. This means it inherits all the functionality of a standard button element, including:

- Accessibility features such as focus styles and keyboard navigation.
- Form submission behavior, making it suitable for use in forms.
- Support for native button attributes like `type`, `disabled`, and `onClick`.

## Styling Other Elements Like a Button

### `buttonVariants` helper

The underlying `buttonVariants` helper, powered by
[CVA](https://github.com/joe-bell/cva), lets you apply button styles to other
elements.

Use `buttonVariants` when you need button styling on another element and do not
need the `Button` component itself:

<Canvas of={ButtonStories.StyledLinkWithButtonVariants} sourceState="shown" />

## Examples

### Recommended

The default story is the simplest starting point when you just need a button.

<Canvas of={ButtonStories.Default} sourceState="shown" />

### Variants

#### Primary

<Canvas of={ButtonStories.Primary} sourceState="shown" />

#### Secondary

<Canvas of={ButtonStories.Secondary} sourceState="shown" />

#### Tertiary

<Canvas of={ButtonStories.Tertiary} sourceState="shown" />

#### Destructive

<Canvas of={ButtonStories.Destructive} sourceState="shown" />

#### Ghost

<Canvas of={ButtonStories.Ghost} sourceState="shown" />

### Layout

Use the `width` prop when the button should hug its content, fill the
container, or respond differently by breakpoint.

<Canvas of={ButtonStories.Widths} sourceState="shown" />

## Related components

- `ButtonIcon` for icon-only actions
- `ButtonSet` for grouped actions