LifeDS

Component

Button

Primary action component. 6 variants, 10 sizes, icon support and interactive states.

variantdefault · outline · secondary · ghost · destructive · link
sizexs · sm · default · lg · xl · icon · icon-xs · icon-sm · icon-lg · icon-xl
disabledboolean
asChildboolean — renders as child element
Playground

Variants

default — primary action
outline — secondary action with border
secondary — complementary action, low emphasis
ghost — contextual action, no background
destructive — irreversible action
link — inline navigation

Sizes

xs

h-6 · 24px

sm

h-7 · 28px

default

h-8 · 32px

lg

h-9 · 36px

xl

h-11 · 44px

Icon button — sizes

icon-xs

24px

icon-sm

28px

icon

32px

icon-lg

36px

icon-xl

44px

With icons

data-icon="inline-start" — icon before label
data-icon="inline-end" — icon after label

States

disabled — all variants
disabled with icon

Full width

Destructive patterns

ghost destructive — tables and lists
solid destructive — critical actions

Rounded — className override

className="rounded-full"

Loading state

Spinner + disabled — data-icon positions the spinner like an icon

As link — buttonVariants()

apply button styles to a non-button element
Login

RTL support

dir="rtl" — icon flips with rtl:rotate-180

Icon standalone — quick actions

ghost and outline

Tokens used

13 semantic tokens consumed by this component.

--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--secondarySecondary
bg-secondarytext-secondaryborder-secondary
--secondary-foregroundSecondary Foreground
text-secondary-foreground
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive
--destructive-foregroundDestructive Foreground
text-destructive-foreground
--backgroundBackground
bg-background
--accentAccent
bg-accenttext-accentborder-accent
--accent-foregroundAccent Foreground
text-accent-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring