Empty State — ARC UI

Components

Empty State

content

static

<arc-empty-state>

Overview

Guidelines

When to use

Always provide at least one action button so the user knows what to do next
Use a relevant icon that hints at the type of missing content (search, folder, etc.)
Write a clear, specific heading like "No results found" rather than a generic "Empty"
Include a helpful description that explains why the area is empty or how to populate it
Use empty state inside data tables, lists, and dashboards that can have zero items

When not to use

Use empty state as a general-purpose card — it is specifically for zero-content scenarios
Leave out the action slot — an empty state without a next step is a dead end
Write vague descriptions like "Nothing here" — be specific about the cause and solution
Use more than two action buttons — keep the path forward simple and clear
Show an empty state while data is loading — use skeletons for loading, empty state for zero results

Features

Centred layout with icon, heading, description, and action button area
Dashed border container with --bg-card background for visual distinction
Named icon slot for custom SVG or emoji icons displayed at 40px
Named action slot with flex layout for one or more CTA buttons
Description text capped at 360px max-width for readability
role="status" on the container for screen reader announcements
CSS parts (container, icon, heading, description, actions) for styling
Heading and description conditionally rendered only when provided

Preview

📁

Create Project

Usage

<arc-empty-state heading="No results found" description="Try adjusting your search.">
</arc-empty-state>

import { EmptyState } from '@arclux/arc-ui-react';

<EmptyState heading="No results found" description="Try adjusting your search.">
</EmptyState>

<script setup>
import { EmptyState } from '@arclux/arc-ui-vue';
</script>

<template>
  <EmptyState heading="No results found" description="Try adjusting your search.">
  </EmptyState>
</template>

<script>
  import { EmptyState } from '@arclux/arc-ui-svelte';
</script>

<EmptyState heading="No results found" description="Try adjusting your search.">
</EmptyState>

import { Component } from '@angular/core';
import { EmptyState } from '@arclux/arc-ui-angular';

@Component({
  imports: [EmptyState],
  template: `
    <EmptyState heading="No results found" description="Try adjusting your search.">
    </EmptyState>
  `,
})
export class MyComponent {}

import { EmptyState } from '@arclux/arc-ui-solid';

<EmptyState heading="No results found" description="Try adjusting your search.">
</EmptyState>

import { EmptyState } from '@arclux/arc-ui-preact';

<EmptyState heading="No results found" description="Try adjusting your search.">
</EmptyState>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-empty-state — requires empty-state.css + base.css (or arc-ui.css) -->
<div class="arc-empty-state">
  <div class="empty" role="status">
   <div class="empty__icon" aria-hidden="true">

   </div>
   Heading
   Description text goes here
   <div class="empty__actions">

   </div>
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-empty-state — self-contained, no external CSS needed -->
<div class="arc-empty-state" style="display: block">
  <div style="display: flex; flex-direction: column; align-items: center; text-align: center; padding: 64px 40px; border: 1px dashed rgb(34, 34, 41); border-radius: 14px; background: rgb(13, 13, 18)" role="status">
   <div style="margin-bottom: 24px; color: rgb(107, 107, 128); font-size: 40px" aria-hidden="true">

   </div>
   Heading
   Description text goes here
   <div style="display: flex; gap: 8px">

   </div>
   </div>
</div>

API

Prop	Type	Default	Description
`heading`	`string`	`''`	Main heading text displayed below the icon
`description`	`string`	`''`	Supporting text displayed below the heading, max-width 360px

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight