Button
A versatile button component with support for multiple variants, sizes, and icon integrations. Supports both button and anchor functionalities.
Component Source
View the source code for the button component.
$lib/components/ui/button/button.svelteInstallation
npx nnuikit add button
import Button from "$lib/components/ui/button/button.svelte";Quick Start
<Button>Button</Button>Interactive Playground
Customize the button's appearance using the controls below.
<Button>Button</Button>Variant
Size
Icon
Options
Variants
Different visual styles of the button component.
Primary
<Button>Button</Button>Main call-to-action (Default)
Secondary
<Button variant="secondary">Button</Button>Secondary actions
Tertiary
<Button variant="tertiary">Button</Button>Tertiary actions with border
Destructive
<Button variant="destructive">Button</Button>Delete or dangerous actions
Warning
<Button variant="warning">Button</Button>Warning state actions
Info
<Button variant="info">Button</Button>Informational actions
Orphan
<Button variant="orphan">Button</Button>Minimal button without border
Link
<Button variant="link">Button</Button>Link-styled button
Glass
<Button variant="glass">Button</Button>Glassmorphism effect
Sizes
Different button sizes for various use cases.
Small
Height: 28px
<Button size="sm">Button</Button>Default
Height: 32px
<Button>Button</Button>Large
Height: 40px
<Button size="lg">Button</Button>Icon SM
Height: 28px
<Button size="icon-sm">Button</Button>Icon MD
Height: 32px
<Button size="icon-md">Button</Button>Icon LG
Height: 40px
<Button size="icon-lg">Button</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "destructive" | "warning" | "info" | "orphan" | "link" | "glass" | "primary" | The visual style of the button. Supports solid, outline, ghost, link, and specialized semantic styles. |
size | "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-md" | "icon-lg" | "default" | The size of the button. Affects padding, height, and font size. |
fullyRounded | boolean | false | If true, applies full border-radius (rounded-full) to the button. |
disabled | boolean | false | Disables user interaction and applies disabled styling including opacity reduction. |
href | string | undefined | If provided, renders the button as an anchor (<a>) tag with the specified URL. |
type | "button" | "submit" | "reset" | "button" | The HTML type attribute for the button element. Ignored if href is provided. |
ref | HTMLButtonElement | HTMLAnchorElement | null | null | Binding to the underlying HTML element. |