<script>
  import { InlineNotification, Button } from "carbon-components-svelte";
  import Add from "carbon-icons-svelte/lib/Add.svelte";
  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
  import Login from "carbon-icons-svelte/lib/Login.svelte";
  import Preview from "../../components/Preview.svelte";
</script>

Buttons trigger actions in the interface. Use them to submit forms, navigate between pages, or perform specific tasks. Choose from different styles and sizes to match the importance and context of each action.

## Primary button

The default button style is primary. This should be used for primary actions.

<Button>Primary button</Button>

## Secondary button

Set `kind="secondary"` for secondary actions.

<Button kind="secondary">Secondary button</Button>

## Tertiary button

Set `kind="tertiary"` for tertiary actions.

<Button kind="tertiary">Tertiary button</Button>

## Ghost button

Set `kind="ghost"` for ghost-style buttons.

<Button kind="ghost">Ghost button</Button>

## Danger button

Set `kind="danger"` for destructive actions.

<Button kind="danger">Danger button</Button>

## Danger tertiary button

Set `kind="danger-tertiary"` for less prominent destructive actions.

<Button kind="danger-tertiary">Danger tertiary button</Button>

## Danger tertiary, icon-only button

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
  </div>
</InlineNotification>

<Button kind="danger-tertiary" iconDescription="Delete" icon={TrashCan} />

## Danger ghost button

Set `kind="danger-ghost"` for ghost-style destructive actions.

<Button kind="danger-ghost">Danger ghost button</Button>

## Button with icon

Add an icon to the button using the `icon` prop.

<Button icon={Add}>With icon</Button>

## Icon-only button

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Provide an <strong>iconDescription</strong> for accessibility. This text will be used as the button's tooltip and screen reader label.
  </div>
</InlineNotification>

<Button iconDescription="Tooltip text" icon={Add} />

## Icon-only, link button

Set `href` to create an icon-only link button.

<Button iconDescription="Login" icon={Login} href="#" />

## Icon-only button (custom tooltip position)

Control the tooltip position and alignment with `tooltipPosition` and `tooltipAlignment`.

<Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add} />

## Selected icon-only, ghost button

Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.

<FileSource src="/framed/Button/SelectedIconOnlyButton" />

## Link button

Set `href` to render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) instead of a `button` element.

<Button href="#">Link button</Button>

## Link button with icon

Similarly, link buttons can have icons.

<Button href="#" icon={Add}>Link button with icon</Button>

## Custom element

By default, the `Button` will render either a `button` or `a` element.

To render a different element, set `as` to `true` and spread `let:props` to the element.

<Button as let:props>
  <p {...props}>Custom element</p>
</Button>

## Field size

The default size is "default".

Set `size="field"` for field-sized buttons.

<Button size="field">Primary</Button>
<Button size="field" kind="secondary">Secondary</Button>
<Button size="field" kind="tertiary">Tertiary</Button>
<Button size="field" kind="ghost">Ghost</Button>
<Button size="field" kind="danger">Danger</Button>

## Small size

Set `size="small"` for small buttons.

<Button size="small">Primary</Button>
<Button size="small" kind="secondary">Secondary</Button>
<Button size="small" kind="tertiary">Tertiary</Button>
<Button size="small" kind="ghost">Ghost</Button>
<Button size="small" kind="danger">Danger</Button>

## Large size

Set `size="lg"` for large buttons.

<Button size="lg">Primary</Button>
<Button size="lg" kind="secondary">Secondary</Button>
<Button size="lg" kind="tertiary">Tertiary</Button>
<Button size="lg" kind="ghost">Ghost</Button>
<Button size="lg" kind="danger">Danger</Button>

## Extra-large size

Set `size="xl"` for extra-large buttons.

<Button size="xl">Primary</Button>
<Button size="xl" kind="secondary">Secondary</Button>
<Button size="xl" kind="tertiary">Tertiary</Button>
<Button size="xl" kind="ghost">Ghost</Button>
<Button size="xl" kind="danger">Danger</Button>

## Disabled state

Set `disabled` to disable the button.

<Button disabled>Disabled button</Button>
<Button disabled iconDescription="Tooltip text" icon={Add} />

## Expressive styles

Set `expressive` to `true` to use Carbon's expressive typesetting.

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    Use expressive styles with default, "lg", or "xl" button sizes.
  </div>
</InlineNotification>

<Button expressive size="xl">Primary</Button>
<Button expressive size="xl" kind="secondary">Secondary</Button>
<Button expressive size="xl" kind="tertiary">Tertiary</Button>
<Button expressive size="xl" kind="ghost">Ghost</Button>
<Button expressive size="xl" kind="danger">Danger</Button>
<br /><br />
<Button expressive size="lg">Primary</Button>
<Button expressive size="lg" kind="secondary">Secondary</Button>
<Button expressive size="lg" kind="tertiary">Tertiary</Button>
<Button expressive size="lg" kind="ghost">Ghost</Button>
<Button expressive size="lg" kind="danger">Danger</Button>
<br /><br />
<Button expressive>Primary</Button>
<Button expressive kind="secondary">Secondary</Button>
<Button expressive kind="tertiary">Tertiary</Button>
<Button expressive kind="ghost">Ghost</Button>
<Button expressive kind="danger">Danger</Button>

## Skeleton

Set `skeleton` to show a loading state.

<Button size="xl" skeleton />
<Button size="lg" skeleton />
<Button skeleton />
<Button skeleton size="field" />
<Button skeleton size="small" />

## Programmatic focus

Bind to the `ref` prop to access the button element for programmatic focus.

<FileSource src="/framed/Button/ProgrammaticFocus" />
