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 #actions slot.

Show an empty state

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

Use a custom icon

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

Props

Prop	Type	Default	Description
`title`	`string \| null`	—	Headline.
`subtitle`	`string \| null`	—	Supporting text.
`useCustomIcon`	`boolean`	`false`	Render the `#icon` slot instead of the default icon.
`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: #icon, #actions.

Edit this pageorReport an issue

Datatable

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

Icons

Render Material Symbols, decorative shapes, tool glyphs, and brand logos.