Empty

Empty is a quiet placeholder for lists, tables, search results, and first-run panels. It is not an alert.

Demos

Basic

With no description, English pages read “No data” and Chinese pages read 「暫無資料」, based on document.documentElement.lang. The illustration is decorative.

<gk-empty description="No data"></gk-empty>

Custom description

Pass description, or replace the text with the description slot.

No matching courses. Try a shorter query.

<gk-empty description="No matching courses"></gk-empty>

Title and actions

title is the stronger line. action and extra are the same action row — usually a primary Button at the md 34 height, plus an optional ghost.

New courseLearn more

<gk-empty
  title="No courses yet"
  description="Create the first course and start collecting what you know."
  size="large"
>
  <gk-button slot="action">New course</gk-button>
  <gk-button slot="extra" variant="ghost">Learn more</gk-button>
</gk-empty>

Large

size="large" increases padding (about 44px) and the illustration (128×96, from 96×72).

<gk-empty size="large" title="Nothing here" description="Large adds padding and a bigger illustration."></gk-empty>

Custom illustration

The image slot (alias icon) replaces the built-in line art. :show-icon="false" hides the default art when you do not pass a replacement.

<gk-empty description="Custom art">
  <svg slot="image" viewBox="0 0 128 96" aria-hidden="true"><!-- your illustration --></svg>
</gk-empty>

In a table

Drop Empty inside the table body. The component stays a centered column and does not force the action button to full width.

NameStatusUpdated

Clear filters

<div class="table">
  <div class="head">Name · Status · Updated</div>
  <gk-empty description="No results. Try another keyword.">
    <gk-button slot="action">Clear filters</gk-button>
  </gk-empty>
</div>

API

Empty Props

Prop	Type	Default
description	string	「暫無資料」 / “No data” by document language
title	string	''
size	'default' | 'large'	'default'
show-icon	boolean	true

Set description yourself when the surrounding page language and documentElement.lang differ. show-icon="false" hides the built-in illustration.

Empty Slots

Name	Description
image / icon	Custom illustration. Replaces the built-in SVG
title	Replaces the title prop
description	Replaces the description text
extra / action	Actions, usually gk-button
default	Extra body under the description

CSS Parts

Part	Description
root	Centered column
image	Illustration. aria-hidden="true"
title	Heading
description	Supporting text
extra	Action row

There is no role="alert". Empty is a placeholder, not an error.

Accessibility

• The illustration is aria-hidden. Do not rely on it alone; keep a description.
• Title and description are normal text.
• Action buttons bring their own names and focus rings. Empty does not add an alert role.