<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

</script>

<Button>Button</Button>

<Button loading>Loading</Button>

<Button disabled>Disabled</Button>

<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

</script>

<Button>Default</Button>

<Button variant="inverted">Inverted</Button>

<Button variant="primary">Primary</Button>

<Button variant="secondary">Secondary</Button>

<Button variant="destructive">Destructive</Button>

<Button variant="outline">Outline</Button>

<Button variant="ghost">Ghost</Button>

<script lang="ts">

  import Button from '$lib/components/base/button.svelte';

  import Icon from '@iconify/svelte';

</script>

<Button>

  <Icon class="size-6" icon="mdi:power" />

  With icon

</Button>

<script>

  import Avatar from '$lib/components/base/avatar.svelte';

  import Button from '$lib/components/base/button.svelte';

  import Icon from '@iconify/svelte';

</script>

<!-- Default -->

<Button>Default</Button>

<!-- Icon -->

<Button size="icon">

  <Icon class="size-6" icon="mdi:power" />

</Button>

<!-- Small -->

<Button size="small">Small</Button>

<!-- Fit -->

<Button size="fit">

  <Avatar

    class="size-8"

    src="https://avatars.githubusercontent.com/u/16535340?v=4&size=64"

    alt="profile"

  />

</Button>

<script>

  import Button from '$lib/components/base/button.svelte';

</script>

<Button>Default</Button>

<Button edge="sharp">Sharp</Button>

<Button edge="circle">Full round</Button>