<Button size="large">Large</Button>
<Button>Default</Button>
<Button size="small">Small</Button>
<Button block>Block level</Button>

<Button type="primary">primary</Button>
<Button type="secondary">secondary</Button>
<Button type="success">success</Button>
<Button type="warning">warning</Button>
<Button type="danger">danger</Button>

<Button outline="primary">primary</Button>
<Button outline="secondary">secondary</Button>
<Button outline="success">success</Button>
<Button outline="warning">warning</Button>
<Button outline="danger">danger</Button>

<script>
import { Button } from 'spaper';
import { Bell, Bookmark, Check } from 'spaper/icons';
</script>

<Button icon={Bell}>Notify</Button>
<Button type="primary" icon={Check}>Save</Button>
<Button icon={Bookmark} type="secondary" aria-label="Bookmark" />

<Button disabled>primary</Button>
<Button type="primary" disabled>primary</Button>
<Button type="secondary" disabled>secondary</Button>
<Button type="success" disabled>success</Button>
<Button type="warning" disabled>warning</Button>
<Button type="danger" disabled>danger</Button>

<Button type="secondary" loading>Please wait</Button>
<Button type="primary" loading>
  {#snippet loader()}
    <span>...</span>
  {/snippet}
  Saving…
</Button>

<Button isLink href="/start">Documentation</Button>
<Button isLink external href="https://github.com/Oli8/spaper">
  GitHub
</Button>