Empty state — Centred icon with action

A centred icon, explanation and stacked actions inside a compact card. Use it when a collection is empty and creating the first item is the main next step.

ReactHTML

1440 × 480

Open in new tab

Component.tsx17 lines

export default function EmptyStateCenteredIcon() {
  return (
    <div className="w-72 rounded-lg border border-neutral-200 bg-white p-6 text-neutral-900 sm:w-96 text-center">
      <span aria-hidden="true" className="mx-auto flex size-12 items-center justify-center rounded-md bg-neutral-100 text-neutral-900">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-5">
          <path d="M3 7V5h6l2 2h10v13H3V7M12 11v6M9 14h6" />
        </svg>
      </span>
      <h2 className="mt-4 text-base font-semibold">Title for the empty list</h2>
      <p className="mt-2 text-sm text-pretty text-neutral-600">Describe what belongs here and how to begin.</p>
      <div className="mt-5 flex flex-col items-center gap-3">
        <a href="#" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Create your first item</a>
        <a href="#" className="text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Import from a file</a>
      </div>
    </div>
  )
}

Pattern notes

When to use: Use for the first item in a collection. Pick empty-state-no-results when filters hide existing items. Variations: replace the folder glyph with an inbox, change creation to invitation, or use an upload action.
Hierarchy: Read the icon, heading, two-line description, filled primary action and underlined import link. Heading up to 5 words; explanation up to 12; action labels up to 4 words. Heading is 16px semibold, body and actions 14px.
Responsive: The card remains centred and stacked at every width. Only its fixed width changes at 640px, from 288px to 384px. Text wraps within the 238px mobile content column and the card fits the 384px-high element frame.
Layout: A 288px (w-72) card, 384px (sm:w-96) from 640px, with p-6 (24px), a 1px neutral-200 border and rounded-lg (8px). A centred 48px folder-plus tile precedes the 16px heading by 16px; description follows by 8px. Actions are a centred column with 12px gaps and 20px top spacing. The primary is 44px tall with 20px side padding and a 6px radius.
States: All links and buttons show a 2px neutral-900 focus-visible outline offset 2px. Primary actions hover to neutral-700, secondary actions to neutral-50, and underlined links to neutral-600. Transitions use the default 150ms timing. The icon and card remain static; there are no selected, open or disabled states.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│                  Folder-plus icon                    │
│              Title for the empty list                │
│                Two-line explanation                  │
│                [Create first item]                   │
│                [Import from a file]                  │
└──────────────────────────────────────────────────────┘

View all

Empty state — Access required
Layout tags: stacked,icons,compact
Empty state — Empty archive with retention summary
Layout tags: split,compact,list
Empty state — Empty collection beside example gallery
Layout tags: split,grid,media

Empty state — Centred icon with action

Pattern notes

More in Empty state

Empty state — Access required

Empty state — Empty archive with retention summary

Empty state — Empty collection beside example gallery