Empty

A component for displaying empty states when there is no data to show.

Basic Usage

📭

No items

You haven't added any items yet.

dart
1
2
3
4
DEmpty(
  title: 'No items',
  description: 'You haven\'t added any items yet.',
)

With Icon

inbox

No messages

Your inbox is empty.

dart
1
2
3
4
5
DEmpty(
  icon: 'inbox',
  title: 'No messages',
  description: 'Your inbox is empty.',
)

With Action

folder

No projects

Create your first project to get started.

dart
1
2
3
4
5
6
7
8
9
DEmpty(
  icon: 'folder',
  title: 'No projects',
  description: 'Create your first project to get started.',
  action: DButton(
    label: 'Create Project',
    leadingIcon: DIcon(name: 'plus'),
  ),
)

Sizes

📭

Small empty state

This is a small empty state.

📭

Medium empty state

This is the default size.

📭

Large empty state

This is a large empty state.

dart
1
2
3
DEmpty(size: DSize.sm, title: 'Small', description: '...')
DEmpty(size: DSize.md, title: 'Medium', description: '...')  // Default
DEmpty(size: DSize.lg, title: 'Large', description: '...')

Preset: No Data

📂

No data

There is no data to display at the moment.

dart
1
2
3
4
5
6
DEmptyNoData(
  action: DButton(
    label: 'Add Data',
    variant: DButtonVariant.outline,
  ),
)

Preset: No Results

🔍

No results found

No results found for "flutter". Try a different search term.

dart
1
2
3
4
5
6
7
DEmptyNoResults(
  searchTerm: 'flutter',
  action: DButton(
    label: 'Clear Search',
    variant: DButtonVariant.outline,
  ),
)