Skip to main content
OORBIT UI
Component catalog
ComponentsAccordion

Accordion

Progressive disclosure for dense guidance, settings, and supporting information. Built from semantic tokens, keyboard-friendly HTML, and reusable React composition.

3 examples

Orbit combines scheduled team hours, live attendance, reservations, and recent service patterns.

Single accordionOne expanded item at a time.
Orbit brief

The evening shift is ready.

Capacity is healthy and one supplier confirmation remains.

Editorial disclosureA bolder Work OS-inspired treatment.

Usage guidance

Use the simplest control that communicates the task. Keep labels specific, preserve comfortable targets, and avoid presenting static information as an action.

Design language

Neutral controls sit on calm charcoal or paper surfaces. Every rounded rectangle uses a continuous G2-style squircle corner; true circles and capsules stay round. Orange is reserved for primary decisions, while coral, violet, cyan, sage, and yellow communicate category and context.