Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Empty State

Placeholder for empty lists or search results.

Components Empty State
content static
<arc-empty-state>

Overview

EmptyState is a structured placeholder for screens, sections, or lists that have no content to display. It centralises an icon, heading, description, and action buttons into a clean, centered layout that guides users toward a next step rather than leaving them staring at a blank area. Common use cases include empty search results, first-run experiences, empty data tables, and zero-state dashboards. The component uses a dashed border and `--bg-card` background to visually distinguish itself from regular content cards. The icon slot (named `icon`) accepts any custom icon markup — SVG, emoji, or icon-font — displayed at 40px in `--text-ghost` color for a subtle, non-distracting appearance. The heading and description are set via string properties, keeping the API simple for the most common use cases. The action slot (named `action`) provides a flex container for one or more buttons, enabling patterns like "Create your first item" or "Try a different search". The description text is capped at 360px max-width for comfortable reading. The outer container uses `role="status"` so assistive technology announces the empty state to screen reader users.

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

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

Features

  • Centered 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';

export default function Example() {
  return (
    <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: `
    <arc-empty-state heading="No results found" description="Try adjusting your search.">
    </arc-empty-state>
  `,
})
export class MyComponent {}
 
import { EmptyState } from '@arclux/arc-ui-solid';

export default function Example() {
  return (
    <EmptyState heading="No results found" description="Try adjusting your search.">
    </EmptyState>
  );
}
 
import { EmptyState } from '@arclux/arc-ui-preact';

export default function Example() {
  return (
    <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

heading string ''
Main heading text displayed below the icon
description string ''
Supporting text displayed below the heading, max-width 360px

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy