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 />

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).

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.

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