Components

Buttons

Buttons use the live Total Wireless action hierarchy: #EE0000 pill CTAs for commerce, navy secondary outlines, and teal-on-dark actions for high-contrast promotional contexts.

Variants

Usage matrix

cta

Purchase actions like Add to Cart

default

Primary non-purchase actions

secondary

Lower-emphasis actions

teal

Availability and savings actions

dark

Bring-your-phone style actions

link

Inline navigation

Observed shape rules

Height

48px

Primary commerce buttons align to the live CTA height.

Radius

Pill

Button radius resolves to a max-radius token rather than card radius.

Active red

#BD0000

Pressed CTA state darkens from the default #EE0000.

Code

<Button variant="cta">Add to Cart</Button>
<Button variant="secondary">Compare plans</Button>
<Button variant="teal">Check availability</Button>