Back to Components
Theme:
Auto (System)
Light
Dark
Button Component
Variants
Primary
Secondary
Danger
Info
Success
Warning
Ghost
import { Button } from 'svelte-ui'; <Button text="Primary" variant="primary" /> <Button text="Ghost" variant="ghost" />
With Icons
Save
Edit
Delete
Info
Success
Warning
Search
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)
Short
Medium Length
Save Changes
Icon + Text (Auto-width with padding)
Save
Edit Document
Search
Icon Only (Fixed 32x32px square)
Interactive
Click me!
As Links
Visit GitHub
Documentation
Home
Custom Content (Children)
Custom Save
Loading...
Delete
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>
Disabled
Primary
Save