Button
Beam Button 2.0. Source in Figma: 2.0/Button.
Product Finder currently uses Primary (Go, results Add to cart) and Tertiary (panel Add to cart, Clear, empty states). The other types are available here for review.
Type
Beam Button 2.0 types at Large · Default. Leading and trailing circle icons match the Figma specimens.
Primary
Filled brand. Main actions (Go, Add to cart on results).
Secondary
Tinted brand fill with brand text.
Tertiary
Outlined quiet. Add to cart in panels, Clear, empty states.
Clear
Brand text only. No fill until hover.
Ghost
Brand text with a soft neutral hover fill.
White
For dark surfaces. Shown on a dark specimen strip.
Destructive (Hollow)
Outlined error. Confirm-cancel pattern.
Destructive
Filled error. Irreversible actions.
Size
Large 40 · Medium 34 · Small 28. Shown on Primary.
Large
Medium
Small
Primary · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Secondary · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Tertiary · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Clear · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Ghost · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
White · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Destructive (Hollow) · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.
Destructive · states
Hover, Focused, and Pressed below are forced specimens. Tab a live button to feel the real focus ring.