syidaxdesign system
Home Pricing Settings
ComponentsFeedback

Empty

Explain why no data is available and what to do next.

<sy-empty>Installation guide Basic usage
Live preview
Interact with the component to see results here.
View code
HTML
<sy-empty text="No projects yet." id="sample"></sy-empty>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "description": true
  });
</script>

Usage guide

#

After a query or search, explain why there is no data and what to do next. Use Skeleton or Spinner while loading.

  1. Explain why it is empty

    Use text to distinguish between no data and no matching search results.

  2. Offer a next action

    Put actions such as Create or Reset filters in the default slot.

  3. Contextual supporting content

    Replace the icon with the icon slot. If description is false, provide alternative accessible guidance that communicates the state.

Examples

#

First use

Explain the initial state before any items exist.

View code
HTML
<sy-empty text="No projects yet."></sy-empty>

Next action

Place a create button in the default slot. Connect its event to the app's creation flow.

View code
HTML
<sy-empty text="Create your first project.">
  <sy-button variant="primary">Create project</sy-button>
</sy-empty>

Custom icon

Use the icon slot to explain the context of the empty state.

View code
HTML
<sy-empty text="The archive is empty."><span
    slot="icon"
    aria-hidden="true"
    style="font-size:38px"
  >◇</span></sy-empty>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-empty>

Properties

Attribute / PropertyTypeDefaultDescription
string'No Data'Message shown in the empty state.
string''Image or SVG URL replacing the default icon. The icon slot takes precedence when present.
string | booleantruetrue shows the text; false hides it. Legacy string text values are also accepted.

Pass objects and arrays as JavaScript properties.

Slots

SlotDescription
Content displayed in the icon area.
Component body or child items.
Design SystemTab Navigate Enter Open