Button Component

Variants

borderless

A ghost Button with borderless=false is the outline button — a transparent fill with a visible tint edge, no separate variant. The 1px box is identical either way, so heights never shift.

import { Button } from 'svelte-ui';

<Button variant="neutral" />
<Button variant="primary" />
<Button variant="secondary" />
<Button variant="success" />
<Button variant="info" />
<Button variant="warning" />
<Button variant="danger" />
<Button variant="ghost" />

Sizes

The shared size axis (the counterpart to variant): sm 24px · md 32px (default) · lg 40px. Every sizeable component (Input, Select, …) consumes the same prop.

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

{#snippet save()}<ContentSave />{/snippet}
{#snippet search()}<Magnify />{/snippet}

<!-- Shared size axis: sm (24px) · md (32px, default) · lg (40px) -->
<Button text="Small"  size="sm" variant="primary" />
<Button text="Medium" size="md" variant="primary" />
<Button text="Large"  size="lg" variant="primary" />

<!-- icon-only, and the dense borderless "ghost" variant (table chrome) -->
<Button icon={save} size="sm" variant="secondary" title="Small" />
<Button icon={save} size="md" variant="secondary" title="Medium" />
<Button icon={save} size="lg" variant="secondary" title="Large" />
<Button icon={search} size="sm" variant="ghost" title="Ghost — dense icon control" />

With Icons

import { Button } from 'svelte-ui';
import ContentSave from '~icons/mdi/content-save';
import Pencil from '~icons/mdi/pencil';
import Delete from '~icons/mdi/delete';
import Information from '~icons/mdi/information';
import CheckCircle from '~icons/mdi/check-circle';
import Alert from '~icons/mdi/alert';
import Magnify from '~icons/mdi/magnify';

<!-- Pass an icon as a snippet — any icon component works -->
{#snippet save()}<ContentSave />{/snippet}
{#snippet edit()}<Pencil />{/snippet}
{#snippet trash()}<Delete />{/snippet}
{#snippet info()}<Information />{/snippet}
{#snippet check()}<CheckCircle />{/snippet}
{#snippet warn()}<Alert />{/snippet}
{#snippet search()}<Magnify />{/snippet}

<Button icon={save} text="Save" variant="primary" />
<Button icon={edit} text="Edit" variant="secondary" />
<Button icon={trash} text="Delete" variant="danger" />
<Button icon={info} text="Info" variant="info" />
<Button icon={check} text="Success" variant="success" />
<Button icon={warn} text="Warning" variant="warning" />
<Button icon={search} text="Search" variant="ghost" />

<!-- Or pass the icon snippet 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" />
<Button icon={search} variant="secondary" title="Search" />
<Button icon={trash} variant="danger" title="Delete" />
<Button icon={info} variant="info" title="Info" />
<Button icon={check} variant="success" title="Success" />
<Button icon={warn} variant="warning" title="Warning" />
<Button icon={edit} variant="ghost" title="Edit" />

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';
import Delete from '~icons/mdi/delete';
import Loading from '~icons/mdi/loading';

<!-- When using children, omit the text/icon props -->
<Button variant="primary">
  <ContentSave />
  <span class="font-bold">Custom Save</span>
</Button>
<Button variant="secondary">
  <Loading class="animate-spin" />
  <span class="ml-2">Loading...</span>
</Button>
<Button variant="danger">
  <Delete />
  <span class="font-bold">Delete</span>
</Button>