Components

Button

72 variants across style, color, size, and state. The primary interactive element in Cedar — used wherever a user needs to trigger an action.

Colors

Each color maps directly to an action/* semantic token. Hover states resolve to *-hover tokens — no one-off values.

brand
secondary
accent
destructive
neutral

Sizes

States

Tokens used

action/primaryFilled button background (brand)
action/primary-hoverHover state background
action/primary-disabledDisabled background
action/on-primaryText on filled buttons
text/disabledText color when disabled
space/3, space/4, space/6Horizontal padding by size
radius/md, radius/lgBorder radius by size (sm → md, md/lg → lg)
border/baseOutlined border color
border-width/baseOutlined border width

Figma

The Button component set in Cedar DS Components has 72 variants:Style × Color × Size × State. Current implementation covers all color and size combinations with enabled and disabled states. Focus state styling (outline ring) is planned for v2.

Figma: DoneReact: v1Focus state: v2