Components

Empty

Communicate an empty state with an icon, message, and optional action.

UiEmpty renders an accessible empty state. Add a call to action via the #action slot — empty states almost always need one.

Show an empty state

<template>
  <UiEmpty title="No projects yet" subtitle="Create your first project to get started.">
    <template #action>
      <UiButton variant="filled" color="primary" text="New project" />
    </template>
  </UiEmpty>
</template>

Use a custom icon

Set use-custom-icon and pass a Material icon code to replace the default animated icon.

<template>
  <UiEmpty title="Inbox zero" use-custom-icon icon-code="&#xe156;" />
</template>

Props

Prop	Type	Default	Description
`title`	`string \| null`	—	Headline.
`subtitle`	`string \| null`	—	Supporting text.
`useCustomIcon`	`boolean`	`false`	Render `iconCode` as a static icon instead of the default animated icon.
`iconCode`	`string`	`''`	Material icon code used when `useCustomIcon` is `true`.
`role`	`string`	`'status'`	ARIA role.
`ariaLabel`	`string`	`'Empty state'`	Accessible name.
`ariaLive`	`'off' \| 'polite' \| 'assertive'`	`'polite'`	Live-region politeness.
`customClass`	`string \| string[] \| null`	—	Extra classes.

Slots: #action — call-to-action content (usually a UiButton) rendered below the title/subtitle. The legacy #button slot name still works as a fallback when #action is unused.

Edit this pageorReport an issue

Datatable

Display tabular data with sorting, a column manager, loading, and empty states.

Icons

Render Material Symbols, decorative shapes, and any inline SVG.