Waiting for action
Open a sub-component to view its docs and settings.
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Lab / development control. A colours pill that renders up to five orbs from demo JSON (or an items array). In the docs preview, three demo clouds each open a full accent palette section — edits update test settings only, not shell or preview theme.
Default preview uses three clouds — Primary, Secondary, Tertiary — each with primary + secondary hex. Editing swatches rewrites cloudsJson in the settings sidebar.
| Prop | Type | Default | Description |
|---|---|---|---|
items / value | clouds designation | — | Up to five orbs. |
label | string | — | Text after the orbs. |
compact | boolean | false | Match 28px toolbar height. |
children | ReactNode | — | Portaled menu body (preview uses three palette sections). |
onClick | MouseEventHandler | — | External panel instead of children. |
aria-label, aria-expanded, and aria-haspopup.