API

Variant (type)

Different based on the component, with the base variant being default.

• primary (default), secondary, tertiary
• static (default), dismissible
• static (default), interactive
• left, center, right
• text, search, textarea
• default, read, unread

Size

Increments vary per component.

• xs, sm, default (base), lg, xl, 2xl

Color

Color props use contextual color tokens.

Background Colors

• bg (default, hover, active)
• bg-brand, bg-brand-hover, bg-brand-active
• bg-accent-light, bg-accent-light-hover, bg-accent-light-active
• bg-neutral, bg-neutral-hover, bg-neutral-active
• bg-success, bg-critical, bg-warning, bg-info, bg-disabled

Icon Colors

• icon
• icon-brand, icon-brand-light, icon-brand-active
• icon-white, icon-black, icon-neutral
• icon-success, icon-critical, icon-info, icon-disabled

Text Colors

• text-white, text-neutral, text-black
• text-success, text-critical, text-info, text-disabled, text-placeholder

Border Colors

• border-white, border-neutral, border-black, border-dark, border-darker, border-darkest, border-hover, border-active
• border-success, border-critical, border-info, border-disabled
• border-brand, border-brand-light, border-brand-hover, border-brand-focus, border-brand-active
• border-accent