ArenaEmptyState.prompt.md
September 6, 2026 ยท View on GitHub
Guided empty state (H9/H10). Always give an exit action. title is required; icon is a
Phosphor class name Arena draws (not a node); absent renders no glyph at all.
<ArenaEmptyState icon="ph-duotone ph-folder-open" title="No projects yet"
message="Create your first project to start deploying." action={<ArenaButton>New project</ArenaButton>} />
Members, in contract order and under this layer's own names. * marks a required one.
| Member | Form | Type | Default | What it is |
|---|---|---|---|---|
icon | primitive | string | A Phosphor class name for the glyph Arena draws, muted. | |
title* | primitive | string | The headline: what is empty. | |
headingLevel | enum | ArenaHeadingLevel | "h3" | Which rung of the document outline the title takes. Only the element changes: the title's class is the same at every value, so the render is identical and no appearance follows from it. It defaults to h3, the card rung of the title ladder, because an empty state fills the body of a region something above it already names, so its headline sits under that name rather than beside it. none is refused at runtime, the rule every component whose title is required follows: a title required because it names the thing it draws cannot also be told that the name is not one. |
message | primitive | string | A sentence of guidance under the title. | |
action | slot | A single call-to-action control, centred under the message. |
The rules of the language hold in the code you write from this page. An Arena component is not a styling surface, so put no className of your own on it. Read every value through its token, never a raw colour and never a bare 16px. Never wrap it in your router's own link. arena-to-prod --audit reports these three in your sources. The rest are in ../../../../../skills/design/SKILL.md, which marks the ones it reports.