All components
Ten components are exported from src/index.ts. Everything else in src/components/ is internal — see the public API record for what was kept out and why.
| Component | Status | What it is for |
|---|---|---|
| Accordion | To be fixed | Use an accordion to let the user expand one answer at a time without leaving the page — an FAQ list on a marketing page. |
| Badge | Released | Use a badge to label a status or category the user reads, not clicks — a category tag, a status pill, a “Most popular” flag. |
| Button | Released | Use this component when need CTA. |
| Card | Released | Use a card to group related content into one surface a user can scan or act on. The card owns the surface, border, radius and padding; everything inside comes from a card layout placed in ↳Layout. |
| Card Layout Vertical | unknown | Card layout. Stacks header, body and footer down the card — the default arrangement used across Lumo screens. |
| Empty State | Released | Use an empty state when a list, card or page has nothing to show — no results, nothing created yet, a failed load, or no permission. |
| Field | Completed | Use field to wrap any input control with a label, an optional required mark and helper or error text — used by Input, Select, Textarea and Checkbox groups alike. |
| Progress | Released | Use progress to show how far along a measurable thing is — a score against a target, an initiative’s completion, a multi-step flow. |
| Switch | Completed | Use a toggle for one setting that takes effect immediately — “Write summary with AI” in the report builder. |
| Toast | To be fixed | Use a toast to confirm that something happened after the user acted — saved, sent, deleted, failed — without interrupting what they are doing. |
7ccfbbb53757.