Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

EmptyState

Explain empty collections, unavailable results and the next useful action.

CoreFeedback & States@gaudi/design-system/core/EmptyStateView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import EmptyState from '@gaudi/design-system/core/EmptyState';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/empty-illustrated.json.

Usage

import EmptyState from '@gaudi/design-system/core/EmptyState';import Button from '@gaudi/design-system/core/Button';
<EmptyState title='No projects yet' description='Create a project to start organizing your work.'  actions={<Button onClick={createProject}>Create project</Button>} />

Playground

EmptyState props
Props
default div
EmptyState.jsx
import EmptyState from '@gaudi/design-system/core/EmptyState';
<EmptyState  title='No projects yet'  description='Create a project to start collecting feedback.'/>

Examples

Illustrated empty states

Storybook

Inside a card

Storybook
Storybook

Surfaces and actions

Storybook

API

7 props

Accessibility

The title and description carry the meaning. Give actions specific names and avoid announcing a stable empty state repeatedly.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examplesToggleGroupSingle or multiple pressed choices for view modes and compact formatting controls.6 examplesKbdKbd renders keyboard keys and multi-key shortcuts.2 examplesuseHotkeyKeyboard shortcuts with platform-aware mod keys.FileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examples