Elements
Buttons
Composed button patterns: leading/trailing icons, soft variants, rounded, circular, and pill.
Looking for every Button prop? See Components › Buttons.
Primary
Primary buttons — the filled, high-emphasis action — across xs / sm / default / lg sizes.
Open
Secondary
Secondary buttons — the outlined, lower-emphasis companion to a primary action.
Open
Secondary green
Filled secondary buttons using the --secondary token — same hierarchy as primary, alternate color.
Open
Secondary coral
Filled coral buttons using the --secondary-coral token — alternate emphasis color.
Open
Soft
Soft tinted buttons in semantic colors.
Open
With leading icon
Buttons with a leading lucide icon.
Open
With trailing icon
Buttons with a trailing icon.
Open
Rounded
Buttons with squared and reduced-radius corners.
Open
Circular
Icon-only circular buttons.
Open
Pill
Fully rounded pill-style buttons.
Open