Button

Button primitive, color policy and interaction states for MVP order, partner and admin workflows.

Component

Button

MVP button primitive for order, partner and admin workflows, with color usage kept separate from meal-accent decoration.

Accepted baseline

Button

Accepted baseline

Button color policy

Color contract

Primary actionAction Red fill

Use Action Red for the highest-value action in a view. Brand Red remains the logo and identity signal; Action Red carries interaction contrast.

--12pm-sys-color-action-primary

Secondary actionNeutral surface

Use for normal saved-work, navigation and review actions so dense operational screens do not become overly saturated.

--12pm-sys-color-action-secondary

Selected redSoft surface + red border

Use Red soft with an explicit selected border, icon, or label. Do not use Red soft as the default muted surface.

--12pm-sys-color-surface-selected / border-selected

Primary uses Action Red rather than Brand Red. This keeps the logo red recognizable while giving CTA, focus and selected states their own stronger interaction value.

Button states

Interaction contract

Default

Hover

Focus

Disabled

Hover

Enabled pointer state only; deepen the current variant without shifting layout.

Focus

Keyboard-visible ring uses the shared focus token and keeps the button color intact.

Disabled

Unavailable actions become neutral and do not use brand color as a promise of progress.

Loading

In-flight actions stay on their variant, show progress, set aria-busy and block repeat taps.