Theme:

Button Component

Variants

import { Button } from 'svelte-ui';

<Button text="Primary" variant="primary" />
<Button text="Ghost" variant="ghost" />

With Icons

import { Button } from 'svelte-ui';
import ContentSave from '~icons/mdi/content-save';

<!-- Pass an icon as a snippet — any icon component works -->
{#snippet save()}<ContentSave />{/snippet}
<Button icon={save} text="Save" variant="primary" />

<!-- Or inline -->
<Button text="Save" variant="primary">
  {#snippet icon()}<ContentSave />{/snippet}
</Button>

Icon Only

<!-- Omit text for a fixed 32x32 square icon button -->
<Button icon={home} variant="primary" title="Home" />

Sizing

Text Only (Auto-width with padding)

Icon + Text (Auto-width with padding)

Icon Only (Fixed 32x32px square)

Interactive

As Links

Visit GitHub

Documentation

Home

Custom Content (Children)

import { Button } from 'svelte-ui';
import ContentSave from '~icons/mdi/content-save';

<!-- When using children, omit the text/icon props -->
<Button variant="primary">
  <ContentSave />
  <span class="font-bold">Custom Save</span>
</Button>

Button Component

Variants

With Icons

Icon Only

Sizing

Text Only (Auto-width with padding)

Icon + Text (Auto-width with padding)

Icon Only (Fixed 32x32px square)

Interactive

As Links

Custom Content (Children)

Disabled