Empty state
What a list or pane is missing, what to do about it, and the action that fills it.
import { EmptyState } from "@arcadia/ui"No skills yet
A skill is a folder with a SKILL.md in it: drop one in ~/.lookout/skills for every workspace.
TSX
One line names what is missing (text-2 at 500), the detail says what to do about it (text-3), and actions holds the button that fills the gap. An optional icon sits in a quiet fill-3 tile: what would be here.
Examples
rootStyle takes where it sits and these knobs: the padding as a spacing token, the frame's line as a palette token.
| Knob | Takes | Default | Sets |
|---|---|---|---|
Ref<Space> | var(--space-4) | Padding on every side (the frame keeps its line inside it). | |
Paint | var(--stroke-3) | The framed card's hairline. |
Static text: no role, nothing focusable but its actions. When it replaces content after an action (a search with no results), give it role="status" so the change is announced.
A loading list shows a Skeleton, never an empty state: empty is an answer, not a wait.
EmptyState
titlerequired- ReactNode
- One line naming what is missing ("No skills yet"), text-2 at 500.
actions- ReactNode
- Buttons that fill the gap (Rescan, Add server), after the text.
align- "start" | "center"Default"start"
startlines up with the page's text column;centersits in a pane of its own.framed- boolean
- An empty list's card: a solid hairline frame a step above the page, where the list would sit (never inside a card).
rootStyle- RootStyle<EmptyStateKnobs>
- Typed StyleX override: where it sits and its
--empty-*knobs. children- ReactNode
- What to do about it, text-3; may hold a path or a link.
Rest props go to HTMLAttributes<HTMLDivElement>.