Traversal nav

Beam Traversal Nav. Source in Figma: 2.0/Traversal Nav.

Circular Previous / Next controls. Use Primary · light bg and Gray · light bg on light surfaces; Primary · dark bg and Gray · dark bg on photography and dark covers. Product Finder does not use these on a live page yet — they are here for review and for cover or gallery work.

Type

Four Beam tones at Medium. Each shows Previous and Next. Dark-surface tones sit on a dark strip.

Primary · light bg

Solid brand. Use on light surfaces.

Primary · dark bg

Brand tint. Use on dark surfaces.

Gray · light bg

Neutral fill. Use on light surfaces.

Gray · dark bg

Surface fill with blur. Use on dark surfaces.

Size

Medium and Large on Primary · light bg.

Medium · 36 · 20px chevron

Large · 44 · 24px chevron

On dark surfaces

Primary · dark bg and Gray · dark bg — the tones meant for photography and dark covers.

Primary · dark bg · Medium

Primary · dark bg · Large

Gray · dark bg · Medium

Gray · dark bg · Large

States

Forced Hover, Focused, and Disabled specimens on Primary · light bg · Medium. Tab a live control for the real focus ring.

Default

Hover

Focused

Disabled