EmptyState

EmptyState is a component that can be used to display a message there is no data to display.

No data

No data to display

'use client'
import {
Button,
EmptyState,
EmptyStateIcon,
EmptyStateTitle,
EmptyStateDescription,
EmptyStateActions,
} from '@nerdfish/ui'
import { TriangleAlertIcon } from 'lucide-react'
export function EmptyStateExample() {
return (
<EmptyState>
<EmptyStateIcon>
<TriangleAlertIcon className="!text-danger" />
</EmptyStateIcon>
<EmptyStateTitle>No data</EmptyStateTitle>
<EmptyStateDescription>No data to display</EmptyStateDescription>
<EmptyStateActions>
<Button variant="secondary">Import items</Button>
<Button>Create first item</Button>
</EmptyStateActions>
</EmptyState>
)
}

Usage

import {
EmptyState,
Button,
EmptyStateIcon,
EmptyStateTitle,
EmptyStateDescription,
EmptyStateActions,
} from '@nerdfish/ui'
import { TriangleAlertIcon } from 'lucide-react'
<EmptyState>
<EmptyStateIcon>
<TriangleAlertIcon />
</EmptyStateIcon>
<EmptyStateTitle>No data</EmptyStateTitle>
<EmptyStateDescription>No data to display</EmptyStateDescription>
<EmptyStateActions>
<Button>Add data</Button>
</EmptyStateActions>
</EmptyState>