No data
Understand why an area is empty and what you can do next. Built on Card.
No metrics yet
Add the first one and its chart starts from today.
<script setup lang="ts">import { Inbox } from '@lucide/vue'import { UiNoData, UiButton } from 'grani'</script> <template> <UiNoData title="No metrics yet" description="Add the first one and its chart starts from today." > <template #media><Inbox /></template> <template #actions> <UiButton>Add a metric</UiButton> </template> </UiNoData></template>
Also called empty state, no results, placeholder message.
Usage
<UiNoData :description="description" /> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| description*string | Why it is empty and what to do next. | |
| titlestring= "" | "" | One short line of what happened: "No invoices yet", "The record did not load". |
| toneneutral | danger= "neutral" | "neutral" | danger for a load that failed: a red plate and an alert; its Retry is a secondary UiButton in #actions. |
| sizesm | md= "md" | "md" | md for a page, sm for a section inside a drawer or a card. |
Anything else lands on the root element: native attributes, aria-*, data-testid.