Id for the default `<h2>` when `heading` is used without default-slot content.
string
string
""
Slots
Name
Description
default
Message body (e.g. `<h2>` + `<p>`). Replaces `heading` / `description` when provided.
media
Illustration or icon above the message (e.g. `<duo-icon>`).
actions
Primary/secondary actions (e.g. `<duo-button>`).
Usage
Empty state explains why a list or panel has no content yet and what the user can do next—optionally with illustration, title, description, and actions.
Do
Use for no items yet or missing configuration where the user can add or connect something.
Keep the actions slot to real <button> elements or links so keyboard users can proceed.
Use the default heading slot or attribute for a clear, scannable title.
Put illustrations in the media slot via <img src="…"> using a ?url import from @duo/assets (see Assets in the docs sidebar).
Don’t
Don’t use for loading or skeleton states—use loading indicators instead.
Don’t use for inline form validation—use field errors or a Banner.
Sizes
Size
When to use
s
Dense panels, sidebars, or modals.
m
Default empty lists and settings areas.
l
Full-page or primary content areas that need stronger emphasis.