NbEmptyState is the centred block a view shows when it has nothing to show. Every product invents its own muted paragraph for this; the value in having one component is less the layout than the four kinds, which are what stop "No results" appearing over a request that failed.
<NbEmptyState
title="Start by adding a field"
description="Fields describe the shape of a content type."
>
<template #actions>
<NbButton size="sm" @click="addField">Add field</NbButton>
</template>
</NbEmptyState>The four kinds
These are genuinely different situations, and running them together is the mistake this component exists to prevent. Pick the one that is true; the icon and the tone follow.
| Kind | Means | The action is |
|---|---|---|
empty | Nothing here yet, and you can make the first | Create |
no-results | There is data; this filter matched none of it | Widen the search. Never offer to create. |
error | The request failed | Retry. Do not offer to create in a view that could not load. |
forbidden | It exists and you may not see it | Usually nothing. Inventing an action is worse than admitting it. |
Writing the copy
From Carbon's empty-state guidance, and worth following:
- Make the title a positive statement where the situation allows one. "Start by adding data assets" reads better than "You don't have any data assets".
- Say what will be here once the space is filled, and be specific about it.
- Keep it short. Centred prose is hard to read past a couple of lines; the description is capped at a comfortable measure for that reason.
- One action, not a menu. An empty state that covers several options stops being guidance. If there are genuinely several routes, name the main one and let the rest live in the page.
Sizes
md is the default, for a whole view. sm is for a panel, a card, or a column.
Bordered
bordered draws a dashed outline around the space. Use it where the empty region would otherwise have no edges, a drop zone or an empty column, so the reader can see how big the empty thing is. Skip it inside a panel that already has a border.
Without an icon
Bind :icon="null" to drop the mark, for a small empty state where it would crowd the copy. The binding is required: icon="null" without the colon passes the string 'null', which resolves to a missing icon rather than to no icon, because the component tests props.icon === null.