Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Canonical icon state
  • Composed actions
  • Default media visual
  • Framed composition
  • Semantic level and dynamic status
  • Recommendations
  • Usage boundaries
  • API reference

Feedback

Empty

Communicates empty, zero-data, or filtered-out views with media, heading, description, and action slots.

idle

Usage

import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Empty>
	<EmptyHeader>
		<EmptyMedia />
		<EmptyTitle />
		<EmptyDescription />
	</EmptyHeader>
	<EmptyContent />
</Empty>

Examples

Canonical icon state

Standard empty presentation with stacked decorative back cards, title, description, and primary action.

Composed actions

Presents multiple next steps arranged with layout primitives like Grid.

Default media visual

Renders plain non-icon media composed from existing Mizen primitives.

Framed composition

Composes inside a Frame panel using Mizen's compound layout components.

Semantic level and dynamic status

Configures semantic heading levels (such as h4) and dynamic status announcements for filtered search results.

Recommendations

GuidancePractice
Do

Explain whether data is absent or filtered out. Offer a relevant first action or a way to clear filters.

Usage boundaries

GuidanceBoundary
Scope

Use Error State for failed loading. Empty content must not imply that a failed request returned no records.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
variant"default" | "icon""default"Visual presentation mode for the media container: default for plain visual or icon for decorated icon card stack.
level1 | 2 | 3 | 4 | 5 | 63Semantic heading level for EmptyTitle, rendering matching native h1 through h6.
EmptyEmptyProps—Root compound container for the empty state layout with responsive centered alignment.
EmptyHeaderEmptyHeaderProps—Header slot that groups media, title, and description with constrained max width.
EmptyMediaEmptyMediaProps—Media container for illustrations or icon card stacks; defaults to aria-hidden.
EmptyTitleEmptyTitleProps—Semantic heading slot for the primary empty state title.
EmptyDescriptionEmptyDescriptionProps—Paragraph slot for supporting description copy.
EmptyContentEmptyContentProps—Content slot for call-to-action buttons and secondary controls.
PreviousBadgeNextError State

No repositories yet

Create a repository to begin collaborating with your team.

No repositories yet

Create a new repository to start collaborating on code with your team.

Get started with your project

Import an existing git repository or start from a scaffolded template.

Workspace ready

No active deployments

Deploy your first build to see live performance telemetry and logs.

Team members
Manage your workspace collaborators and permissions.

No team members yet

Invite colleagues to begin reviewing pull requests and collaborating.

Filtered query feedback

No matching records found

No records matched your current query filter. Clear your search to view all items.