Empty

Explain an empty collection with a quiet dashed boundary and an optional next action.

No items yet

Create your first item to get started.

Usage

.empty-state supplies the dashed border, rounded corners, centered layout and spacing. Its header, icon, title, description and action classes supply the standard appearance without additional utilities or JavaScript.

Provide a title or description, and use a short action when the user can resolve the empty state. Omit the action when that capability is unavailable.

Add Bootstrap utility classes directly to the .empty-state root element for additional styling. For example, border-0 removes the boundary, bg-body-tertiary adds a surface, and text-start align-items-start gives a start-aligned variant. Directional text utilities follow the host's Bootstrap CSS distribution; an RTL host supplies its RTL utility definitions.

Place a decorative icon inside .empty-state-icon and native links or buttons inside .empty-state-actions. Mark decorative icons aria-hidden="true"; the standard icon frame sizes elements with data-icon. Escape untrusted text and attributes before adding them to HTML.

For filtered collections, explain that no results match and offer a filter reset. For an empty collection, explain how to create the first item. Native navigation, form ownership and permissions remain with the action and its host.

Empty

{"title": "Moo UI Empty - Empty collection", "description": "A title, short explanation and optional action share a calm surface.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"empty-state\">\n  <div class=\"empty-state-header\">\n    <div class=\"empty-state-icon\">\n      <svg\n        data-icon=\"inline-start\"\n        data-lucide=\"folder\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        aria-hidden=\"true\"\n      >\n        <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"/>\n      </svg>\n    </div>\n    <h3 class=\"empty-state-title\">No items yet</h3>\n    <p class=\"empty-state-description\">Create your first item to get started.</p>\n  </div>\n  <div class=\"empty-state-actions\">\n    <button class=\"btn btn-outline-secondary\" type=\"button\">Create item</button>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "empty", "components"], "editors": "110", "js_module": false}

No items yet

Create your first item to get started.

1
2
3
4
5
6
7
8
9
10
11
12<div class="empty-state">
  <div class="empty-state-header">
    <div class="empty-state-icon">
      <i class="lucide lucide-folder" data-icon="inline-start" aria-hidden="true"></i>
    </div>
    <h3 class="empty-state-title">No items yet</h3>
    <p class="empty-state-description">Create your first item to get started.</p>
  </div>
  <div class="empty-state-actions">
    <button class="btn btn-outline-secondary" type="button">Create item</button>
  </div>
</div>

Empty

No matching results

Try a different search.

1
2
3
4
5
6<div class="empty-state">
  <div class="empty-state-header">
    <h3 class="empty-state-title">No matching results</h3>
    <p class="empty-state-description">Try a different search.</p>
  </div>
</div>

Empty

{"title": "Moo UI Empty - Utility customization", "description": "Add Bootstrap utilities to the standard component for a different surface or alignment.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"empty-state border-0 bg-body-tertiary text-start align-items-start\">\n  <div class=\"empty-state-header\">\n    <h3 class=\"empty-state-title\">No matching results</h3>\n    <p class=\"empty-state-description\">Clear the filters to see all items.</p>\n  </div>\n  <div class=\"empty-state-actions\">\n    <button class=\"btn btn-outline-secondary\" type=\"button\">Clear filters</button>\n  </div>\n</div>\n</div>", "html_pre_processor": "none", "css": "", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "empty", "components"], "editors": "110", "js_module": false}

No matching results

Clear the filters to see all items.

1
2
3
4
5
6
7
8
9<div class="empty-state border-0 bg-body-tertiary text-start align-items-start">
  <div class="empty-state-header">
    <h3 class="empty-state-title">No matching results</h3>
    <p class="empty-state-description">Clear the filters to see all items.</p>
  </div>
  <div class="empty-state-actions">
    <button class="btn btn-outline-secondary" type="button">Clear filters</button>
  </div>
</div>

لا توجد عناصر بعد

أنشئ أول عنصر للبدء.

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="w-100" dir="rtl">
  <div class="empty-state">
    <div class="empty-state-header">
      <div class="empty-state-icon">
        <i class="lucide lucide-folder" data-icon="inline-start" aria-hidden="true"></i>
      </div>
      <h3 class="empty-state-title">لا توجد عناصر بعد</h3>
      <p class="empty-state-description">أنشئ أول عنصر للبدء.</p>
    </div>
    <div class="empty-state-actions">
      <button class="btn btn-outline-secondary" type="button">إنشاء عنصر</button>
    </div>
  </div>
</div>

עדיין אין פריטים

צרו פריט ראשון כדי להתחיל.

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="w-100" dir="rtl">
  <div class="empty-state">
    <div class="empty-state-header">
      <div class="empty-state-icon">
        <i class="lucide lucide-folder" data-icon="inline-start" aria-hidden="true"></i>
      </div>
      <h3 class="empty-state-title">עדיין אין פריטים</h3>
      <p class="empty-state-description">צרו פריט ראשון כדי להתחיל.</p>
    </div>
    <div class="empty-state-actions">
      <button class="btn btn-outline-secondary" type="button">יצירת פריט</button>
    </div>
  </div>
</div>

No items yet

Create your first item to get started.

1
2
3
4
5
6
7
8
9
10
11
12<div class="empty-state">
  <div class="empty-state-header">
    <div class="empty-state-icon">
      <i class="lucide lucide-folder" data-icon="inline-start" aria-hidden="true"></i>
    </div>
    <h3 class="empty-state-title">No items yet</h3>
    <p class="empty-state-description">Create your first item to get started.</p>
  </div>
  <div class="empty-state-actions">
    <button class="btn btn-outline-secondary" type="button">Create item</button>
  </div>
</div>

Component reference

Status

Ready

Runtime

native HTML/CSS

Markup

Moo UI documented extension

Reference

Empty is a Moo-owned static component. Its surface uses Bootstrap's shared border, radius and theme tokens; utility overrides follow the Bootstrap border documentation.

Its visual structure is informed by the shadcn/ui Empty reference.

Empty

No items yet

Usage

Empty collection

No items yet

Message only

No matching results

Utility customization

No matching results

RTL

لا توجد عناصر بعد

עדיין אין פריטים

No items yet

Component reference

Settings

No items yet

Usage

Empty collection

No items yet

Message only

No matching results

Utility customization

No matching results

RTL

لا توجد عناصر بعد

עדיין אין פריטים

No items yet

Component reference

Search documentation

Settings