<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";

  let index = 1;
</script>

## Primary button

<Button>Primary button</Button>

## Secondary button

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

## Tertiary button

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

## Ghost button

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

## Danger button

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

## Danger tertiary button

<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">
    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </div>
</InlineNotification>

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

## Danger ghost button

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

## Button with icon

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

## Icon-only button

<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
  <div class="body-short-01">
    You must provide an <strong>iconDescription</strong> for the button tooltip.
  </div>
</InlineNotification>

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

## Icon-only, link button

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

## Icon-only button (custom tooltip position)

The tooltip position and alignment can be controlled by `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

If an `href` value is specified, the component will 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>

## Custom element

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

## Field size

<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

<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

<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

<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 button

<Button disabled>Disabled button</Button>

## 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">
    Expressive styles only work with the default, "lg", and "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

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