Props

Name	Type	Default	Description
title	string	required	The primary message, rendered as the heading of the empty state. Say what is empty ("No projects yet") instead of something generic like "No data".
description	string	-	Secondary text below the title that explains why the area is empty or what the user can do next. Rendered as a <div>.
headingLevel	1 | 2 | 3 | 4 | 5 | 6	3	The semantic level of the title. It controls only the rendered HTML tag (h1–h6) so the title fits the document outline; the visual size of the title is the same at every level.
isCompact	boolean	false	Reduces the spacing and the text sizes for constrained areas such as cards and sidebars, and stacks the actions in a column.

Slots

Name	Description
icon	The icon or illustration above the title. Its wrapper carries aria-hidden="true", so an icon placed here needs no label.
title	Rich content for the title. Overrides the title prop, for example to place a link inside the heading.
description	Rich content for the description. Overrides the description prop; because it renders as a <div>, it can hold block content such as a list.
actions	The actions below the text, usually one or two buttons. They sit in a row that wraps, and become a column when isCompact is true.

Native attributes

The root element is a <div>.

The following go to the root element:

• HTML attributes.
• aria-* attributes.
• data-* attributes.
• class.
• style.

The root element carries role="status" by default, and an explicit role overrides it.

Theme tokens

packages/themes/neutral/empty-state.css provides these tokens, which a theme can override:

Token	Description
--astryx-empty-state-title-foreground	Color of the title, which matches the primary text color by default.
--astryx-empty-state-description-foreground	Color of the description, which matches the secondary text color by default.
--astryx-empty-state-text-width	Maximum width of the text column formed by the title and the description. 360px by default.