blue
View on GitHub

Empty State

Empty State explains why a region has no content and can offer a clear next step.

Usage

Provide a short title that names the empty condition and a description that helps the user understand what to do next. The component uses the archive icon by default.

Light
Blue
Zoho Puvi

No open tickets

This contact has no open tickets right now. New tickets will appear here.

<script>
	import { EmptyState } from 'deskblocks';
</script>

<EmptyState
	title="No open tickets"
	description="This contact has no open tickets right now. New tickets will appear here."
/>

Custom icon

Pass an SVG string from deskblocks/icons through icon . Set icon="" when the empty state does not need an illustration.

Light
Blue
Zoho Puvi

No results found

Try adjusting the filters or searching by ticket number instead.

<script>
	import { EmptyState } from 'deskblocks';
	import { IconSearch } from 'deskblocks/icons';
</script>

<EmptyState
	icon={IconSearch}
	title="No results found"
	description="Try adjusting the filters or searching by ticket number instead."
/>

With an action

Use the action slot for a follow-up control, such as a Button or a Link .

Light
Blue
Zoho Puvi

No tickets yet

Create the first ticket for this account to start tracking conversations.

<script>
	import { EmptyState, Button } from 'deskblocks';
	import { IconTicket } from 'deskblocks/icons';
</script>

<EmptyState
	icon={IconTicket}
	title="No tickets yet"
	description="Create the first ticket for this account to start tracking conversations."
>
	<Button slot="action" variant="secondary">Create ticket</Button>
</EmptyState>

Slots

Props

icon string Archive icon SVG string for the illustration. Pass an empty string to hide it.
title string Required Headline that describes the empty condition.
description string undefined Supporting text displayed below the headline.
class string undefined Custom CSS class name for additional styling.