HelixOverviewComponentsMapsGraphIntroductionInstallationDeriving a themeSandboxTheme builderVisual testingCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
EmptyView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA message that a region has nothing in it, and the next step to take.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/empty'import'@fusion.dev/helix-headless/empty'Preview
API ReferenceRoothelix-emptyA message that a region has nothing in it, and the next step to take.
PropTypeDescriptionheadingstringDefault""The heading as words, such as "No results", drawn as a heading when
nothing is slotted into heading.headingLevelnumberThe level of the heading heading draws, from 1 to 6.noAnnouncebooleanDefaultfalseWhether the state is announced when it appears.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message: why the region is empty, and what to do about it.actionsThe action that would put something in the region.headingThe heading, which names what is missing. A heading element, such as an <h3>, keeps its level; any other element is read as a heading at heading-level. Replaces the one heading draws.iconAn icon above the heading.
PartDescriptionactionsThe slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; display: flex lays them out in a row.headingThe heading at heading-level: the one heading draws while nothing is slotted into heading, or the one around a slotted element that is no heading.iconThe slot the icon arrives through, drawing no box, as actions does.liveA copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.messageThe slot the message arrives through, drawing no box, as actions does.
CSS PropertyDescription--empty-actions-gapSpace added above the actions.--empty-gapSpace between the icon, the heading, the message and the actions.--empty-heading-colorColor of the heading.--empty-heading-sizeSize of the heading.--empty-icon-colorColor of the icon.--empty-icon-sizeSize of the icon.--empty-message-colorColor of the message.--empty-message-measureWidest the message runs before it wraps.--empty-message-sizeSize of the message.--empty-paddingSpace around the whole block.
Custom stateDescriptionhas-actionsSomething is slotted into actions.has-iconSomething is slotted into icon.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Roothelix-headless-emptyA message that a region has nothing in it, and the next step to take.
PropTypeDescriptionheadingstringDefault""The heading as words, such as "No results", drawn as a heading when
nothing is slotted into heading.headingLevelnumberThe level of the heading heading draws, from 1 to 6.noAnnouncebooleanDefaultfalseWhether the state is announced when it appears.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescription(default)The message: why the region is empty, and what to do about it.actionsThe action that would put something in the region.headingThe heading, which names what is missing. A heading element, such as an <h3>, keeps its level; any other element is read as a heading at heading-level. Replaces the one heading draws.iconAn icon above the heading.
PartDescriptionactionsThe slot the actions arrive through. A slot draws no box, so it passes inherited properties to the actions; display: flex lays them out in a row.headingThe heading at heading-level: the one heading draws while nothing is slotted into heading, or the one around a slotted element that is no heading.iconThe slot the icon arrives through, drawing no box, as actions does.liveA copy of the heading and the message, in a live region that screen readers announce when the view appears. Visually hidden in the styled tier.messageThe slot the message arrives through, drawing no box, as actions does.
Custom stateDescriptionhas-actionsSomething is slotted into actions.has-iconSomething is slotted into icon.settledSet one frame after the first render. Transitions wait for it, so an element does not animate its own arrival.
Examples
NameDescriptionHeadingAn empty state whose heading is given as words in heading, drawn as a level 2 heading with heading-level.No AnnounceAn empty state that is not announced, for one that loads with the page.PreviewAn empty state with a heading, an explanation, and an action.PreviewAn empty state with a heading, an explanation, and an action.