General

Button

Trigger actions and events with accessible, styled buttons. Supports variants, colors, icons, loading states, and can render as links.

Playground

Experiment with different props in real-time.

Basic Usage

Import and use the Button component with a label prop.

<script lang="ts">
  import { Button } from 'sv5ui';
</script>

<Button label="Button" />

Variants

6 visual styles for different levels of emphasis.

<Button variant="solid" label="Solid" />
<Button variant="outline" label="Outline" />
<Button variant="soft" label="Soft" />
<Button variant="subtle" label="Subtle" />
<Button variant="ghost" label="Ghost" />
<Button variant="link" label="Link" />

Colors

8 semantic color schemes.

<Button color="primary" label="Primary" />
<Button color="secondary" label="Secondary" />
<Button color="tertiary" label="Tertiary" />
<Button color="success" label="Success" />
<Button color="warning" label="Warning" />
<Button color="error" label="Error" />
<Button color="info" label="Info" />
<Button color="surface" label="Surface" />

Sizes

5 sizes from extra small to extra large.

<Button size="xs" label="Extra Small" />
<Button size="sm" label="Small" />
<Button size="md" label="Medium" />
<Button size="lg" label="Large" />
<Button size="xl" label="Extra Large" />

Icons

Add icons in various positions using Iconify names.

<!-- Icon only -->
<Button icon="lucide:plus" />

<!-- Leading icon -->
<Button leadingIcon="lucide:download" label="Download" />

<!-- Trailing icon -->
<Button trailingIcon="lucide:arrow-right" label="Next" />

<!-- Both icons -->
<Button leadingIcon="lucide:mail" trailingIcon="lucide:send" label="Send" />

States

Loading, disabled, and full-width states.

<Button label="Loading" loading />
<Button label="Disabled" disabled />
<Button label="Full Width" block />

As Link

Pass an href prop to render as an anchor element.

Go to Docs GitHub 
<!-- Internal link -->
<Button href="/docs" label="Go to Docs" />

<!-- External link -->
<Button href="https://github.com" target="_blank" label="GitHub" />

UI Slots

Use the ui prop to override classes on specific internal elements of the Button.

SlotDescription
baseRoot button element — controls shape, padding, shadow, etc.
labelText label wrapper — controls font, spacing, text styles
leadingIconIcon before the label — controls icon size, color, animation
trailingIconIcon after the label — controls icon size, color, animation
leadingAvatarAvatar before the label — controls avatar wrapper styles
leadingAvatarSizeAvatar size wrapper — controls avatar dimensions
<Button
  label="Custom Styled"
  leadingIcon="lucide:star"
  ui={{
    base: 'rounded-full shadow-lg',
    label: 'font-bold tracking-wide',
    leadingIcon: 'text-yellow-400'
  }}
/>
<Button
  label="Gradient Button"
  leadingIcon="lucide:sparkles"
  ui={{
    base: 'bg-gradient-to-r from-purple-500 to-pink-500 border-none text-white hover:from-purple-600 hover:to-pink-600',
    leadingIcon: 'animate-pulse'
  }}
/>

Snippets

Use snippets to fully replace the leading or trailing content with custom markup.

SnippetReplacesDescription
childrenlabelCustom label content — use for rich text, inline elements, etc.
leadingSlotleadingIcon / avatarCustom content before the label — replaces icon and avatar
trailingSlottrailingIconCustom content after the label — replaces trailing icon
<Button variant="outline" color="primary">
  {#snippet leadingSlot()}
    <div class="flex h-5 w-5 items-center justify-center rounded-full bg-primary">
      <span class="text-[10px] font-bold text-on-primary">AI</span>
    </div>
  {/snippet}
  Ask Claude
  {#snippet trailingSlot()}
    <Kbd value="⌘K" size="sm" />
  {/snippet}
</Button>
<Button variant="soft" color="success">
  {#snippet leadingSlot()}
    <span class="relative flex h-2.5 w-2.5">
      <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-success opacity-75"></span>
      <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-success"></span>
    </span>
  {/snippet}
  Online
</Button>

Props

PropTypeDefault
variant'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link''solid'
color'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'error' | 'info' | 'surface''primary'
size'xs' | 'sm' | 'md' | 'lg' | 'xl''md'
labelstring-
iconstring-
leadingIconstring-
trailingIconstring-
trailingbooleanfalse
loadingbooleanfalse
loadingIconstring'lucide:loader-circle'
disabledbooleanfalse
blockbooleanfalse
squarebooleanfalse
hrefstring-
avatarAvatarProps-
classstring-
uiRecord<Slot, Class>-
Dark Mode FieldGroup