Button Component

Capsule-shaped buttons with solid ink borders and orbit hover effect.

Variants

Hover over buttons to see the orbit outline effect.

Use affordance="none" to disable orbit hover when buttons are inside already-hoverable containers.

Use affordance="subtle" or border-transparent for buttons inside bordered containers to reduce visual noise.

Confirm action?

This will apply changes to your account.

Call-to-action buttons for hero sections and important actions.

Start creating beautiful interfaces with the Orbit Capsule system.

Prop	Type	Default
variant	"default" \| "secondary" \| "outline" \| "accent" \| "destructive" \| "ghost" \| "subtle" \| "link"	"default"
size	"sm" \| "default" \| "lg" \| "icon-sm" \| "icon" \| "icon-lg"	"default"
affordance	"orbit" \| "subtle" \| "none"	"orbit"

orbit — Default orbit expansion effect on hover
subtle — Subtle brightness change, ideal for buttons inside hoverable containers
none — No hover affordance effect