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.

Feature examples

#

Choose a feature from 2 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code
HTML
Loading the example.

Property · Description

See how settings change appearance and behavior.

View code
HTML
Loading the example.

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