<script>
  import { Button } from "carbon-components-svelte";
  import Add16 from "carbon-icons-svelte/lib/Add16";
  import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
  import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
  import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
  import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
  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

**Note:** you must provide an `iconDescription` for the button tooltip.

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

### Danger ghost button

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

### Button with icon

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

### Icon-only button

**Note:** you must provide an `iconDescription` for the button tooltip.

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

### 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={Add16} />

### 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) with a "button" role.

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

Note: the expressive styles only apply to the default, `"lg"`, and `"xl"` button sizes.

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