MenuCaderno UI
npmGitHub
Theme

<cad-empty-state>

Empty state

Explain what is missing and offer a next step. Add your own illustration, text, and actions.

First project

+ Create projectBrowse templates →

Sizes and use cases

Compact · no results

Clear filters

Minimal · no data

+ Create note

Compact · no access

Request access

Size and tone

Use comfortable for a full-page empty state, compact in a panel, and minimal without a surrounding surface. Choose the tone to match the message.

API reference: <cad-empty-state>

descriptiondescriptionstring''eyebroweyebrowstring''sizesizeCadEmptyStateSize'comfortable'titletitlestring''tonetoneCadEmptyStateTone'neutral'variantvariantCadEmptyStateVariant'no-data'descriptionstringdescriptionnoeyebrowstringeyebrownosizeCadEmptyStateSizesizeyestitlestringtitlenotoneCadEmptyStateTonetoneyesvariantCadEmptyStateVariantvariantyesactionsLegacy action group.descriptionSupporting copy. Falls back to `description`.eyebrowOptional context label. Falls back to `eyebrow`.iconOptional product-facing illustration.primaryPrimary recovery action.secondaryOptional alternative action.titleVisible title. Falls back to `title`.actionsAction area.baseEmpty state surface.descriptionSupporting copy.eyebrowContext label.iconIllustration area.titleTitle area.--cad-empty-state-accentPer-instance accent color.--cad-empty-state-bgPer-instance surface color.

Accessibility

This is static content, not an alert. Use specific action labels. Move focus only when a user action removes the previously focused content.

MIT licensed. Built with Caderno UI.Report an issue
Back to top