CnWidgetEmptyState

The designed empty state for a dashboard widget: a tinted circular icon, a short headline, an optional explanatory line, and an optional single call to action.

It exists because an empty widget used to render whatever its content component left behind. Most visibly, an empty list widget rendered a CnDataTable with no rows — and a table with no rows still paints its <thead>, which reads as a full-width grey bar floating in the middle of an otherwise blank card.

The state sizes to the widget rather than claiming a fixed block, so it never forces a scrollbar on a short tile; where even that is too tall, compact collapses it to a single quiet row.

Usage

<CnWidgetEmptyState
  :name="t('myapp', 'No open cases')"
  :description="t('myapp', 'Cases assigned to you will appear here.')"
  variant="primary">
  <template #action>
    <NcButton @click="create">{{ t('myapp', 'New case') }}</NcButton>
  </template>
</CnWidgetEmptyState>

Inside a fit-measured cell, drop to the compact row instead:

<CnWidgetEmptyState :name="emptyText" compact />

Sizes and the board look

size is widget (the default look: 48px circle, 14px name) or card (the board empty state: 48px grey circle holding a 24px icon, 16px bold name, 14px grey description up to 480px wide, the action 6px below, 28px 20px padding). Left unset, it is card when the app takes the board look (cnLook is board, provided by CnAppRoot) and compact is off, and widget otherwise. An empty state is never drawn with a dashed border: only a file drop zone is dashed.

The library's own empty states (CnIndexPage, CnCardGrid, CnDashboardPage, CnObjectKanban, CnDetailWidgetHost, CnRelatedObjectsWidget, CnTabsWidget, CnObjectList, CnFilesBrowser) render this component at card size in the board look and keep NcEmptyContent in the Nextcloud look. Each component's empty slot still wins.

Choosing a variant

variant should match the host widget's titleIconVariant, so an empty widget still reads as the same widget. Colours resolve to Nextcloud tokens and the circle's tint is derived from the same token with color-mix() — never a frozen rgba(), which would ignore a re-themed palette (NL Design System).

OpenRegister reliance

none: this component does not touch OpenRegister, directly or through anything it imports. 0 direct references, 0 files reached through imports.

See the reliance overview for the filterable list.

Props

Name	Type	Required	Default	Description
name	string		() => t('nextcloud-vue', 'Nothing here yet')	Headline — what is empty, in the user's words.
description	string		''	Optional second line explaining what would fill the widget.
icon	union		null	Icon component rendered inside the circle. Defaults to an empty-tray outline.
variant	string		'neutral'	Semantic colour for the icon and its tint, matching the widget header's titleIconVariant so an empty widget still reads as the same widget.
compact	boolean		false	Shrink to a single quiet line-height block — for short tiles where a full empty state would be taller than the widget.
size	string		''	Size: widget (the default look, 48px circle, 14px name) or card (the board empty state: 16px/700 name, 14px description, 24px icon). Left empty, it is card in the board look unless compact is set, and widget otherwise.

Slots

Name	Bindings	Description
icon	—	icon Replace the default outline icon. Keep it a single
action	—	action A single call to action — the thing that would