Design System

Welcome to the Statellite Design System.

Badge Colors (New API)

Red

color="red"

Green

color="green"

Gray

color="gray"

Brand Gradient

color="brand-gradient"

Primary Blue

color="primary-blue"

White

color="white"

No Fill

color="no-fill"

Brand Dark

color="brand-dark"

Yellow

color="yellow"

Blue

color="blue"

Badge Sizes

Small

size="sm"

Medium

size="md"

Large

size="lg"

Badge with Icons

Verified
Error
Featured

Legacy Variants (Deprecated)

The following variants are deprecated. Use the new color prop instead.

Default
Success
Error
Neutral
Special
Outline
Secondary
Closed

Button Variants (New API)

variant="primary"

variant="secondary"

variant="tertiary"

variant="link"

variant="link-secondary"

Destructive Variants

variant="primary" destructive

variant="secondary" destructive

variant="tertiary" destructive

variant="link" destructive

variant="link-secondary" destructive

Button Sizes

size="sm"

size="md"

size="lg" (default)

size="xl"

size="2xl"

size="icon"

Disabled States

disabled

disabled

disabled

disabled

destructive disabled

Buttons with Icons