Button

Stable v1.0.2

The button component everything else in this library leans on. Icons, loading states, badges, and every size and severity, so you rarely need to reach for a custom one.

Interactive Playground

Combine every prop live and copy the resulting code.

Content

Label

Icon

Icon Position

Left

Appearance

Variant

Solid

Severity

Primary

Size

Small (sm)

Badge

Badge Value

Badge Severity

Danger

States

Rounded Pill

Block (Full Width)

Disabled

Raised

Live Source Code

<Button label="Click Me" icon="lucide:sparkles" />

Variants

Change the visual weight using the variant prop. (Hover over the Text variant to see the semantic tint overlay).

Template

<Button label="Solid" />
<Button label="Soft" variant="soft" />
<Button label="Outline" variant="outline" />
<Button label="Text" variant="text" />
<Button label="Link" variant="link" />

Raised (Elevation)

Add physical depth and a hover-lift effect using the boolean raised prop. This works across all variants and severities.

Template

<!-- Raised Solid -->
<Button label="Primary" raised severity="primary" />
<Button label="Success" raised severity="success" />

<!-- Raised Outline -->
<Button label="Primary" variant="outline" raised severity="primary" />
<Button label="Danger" variant="outline" raised severity="danger" />

<!-- Raised Text -->
<Button label="Primary" variant="text" raised severity="primary" />
<Button label="Warning" variant="text" raised severity="warning" />

Severities

Convey semantic meaning using the severity prop.

Template

<Button label="Primary" severity="primary" />
<Button label="Secondary" severity="secondary" />
<Button label="Success" severity="success" />
<Button label="Danger" severity="danger" />

Icons & Positions

Configure icon placement using the iconPos prop.

Template

<Button label="Left" icon="lucide:arrow-left" />
<Button label="Right" icon="lucide:arrow-right" iconPos="right" />
<Button label="Top" icon="lucide:arrow-up" iconPos="top" />
<Button icon="lucide:bookmark" aria-label="Bookmark" /> <!-- Icon Only -->

States, Badges & Sizes

Manage feedback, data counts, and dimensions natively with props.

Template

<Button label="Extra Small" size="xs" />
<Button label="Rounded Pill" rounded />
<Button label="Messages" badge="8" />
<Button label="Submit" :loading="isLoading" @click="submit" />
<Button label="Disabled" disabled />

Custom Slots

Bypass standard props using the default and #icon slots for complex inner layouts.

Template

<!-- Default Slot (Complex Text) -->
<Button severity="secondary">
  <span class="flex items-center gap-1.5">
    Save <span class="text-primary font-bold">Changes</span>
  </span>
</Button>

<!-- Named Icon Slot (Raw SVG) -->
<Button label="Custom SVG">
  <template #icon>
    <svg class="w-4 h-4 text-warning" viewBox="0 0 24 24">
      <!-- ... path data ... -->
    </svg>
  </template>
</Button>

API Reference

Props

Name	Type / Signature	Default	Description
label	string	undefined	Text content of the button.
icon	string	undefined	Lucide icon name (e.g. 'lucide:check'), rendered before/around the label.
iconPos	"left" \| "right" \| "top" \| "bottom"	"left"	Position of the icon relative to the label.
badge	string \| number	undefined	Small counter/indicator rendered at the end of the button.
badgeSeverity	"primary" \| "secondary" \| "danger" \| "success" \| "warning" \| "info"	"danger"	Semantic color of the badge.
variant	"solid" \| "soft" \| "outline" \| "text" \| "link"	"solid"	Visual weight of the button.
severity	"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "info"	"primary"	Semantic color of the button.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"sm"	Dimensional size of the button.
rounded	boolean	false	Renders a fully pill-shaped button.
block	boolean	false	Expands the button to fill its container width.
disabled	boolean	false	Disables interaction and dims the button.
loading	boolean	false	Replaces the icon with a spinning loader and disables interaction.
raised	boolean	false	Adds elevation shadow for a lifted appearance.

Slots

Slot Name	Exposed Bindings	Description
default	-	Fallback content rendered in place of the label prop.
icon	-	Overrides the rendered icon entirely with custom markup.