Nothing here yet
No contacts yet
Import a CSV or add your first contact by hand.
import { UsersIcon } from '@phosphor-icons/react';
import { Button, EmptyState } from '@arbol-ai/ui';
<EmptyState
actions={<Button>Add contact</Button>}
description="Import a CSV or add your first contact by hand."
icon={<UsersIcon aria-hidden />}
title="No contacts yet"
/>No results for these filters
The title and the “Clear filters” button come from the library in the active language; the app passes what clearing does.
No results for these filters
import { EmptyState } from '@arbol-ai/ui';
<EmptyState onClearFilters={() => undefined} variant="filtered" />A load that failed
Read out when it appears; “Try again” waits while the retry runs.
We couldn’t load this
Check your connection and try again.
import { EmptyState } from '@arbol-ai/ui';
<EmptyState
description="Check your connection and try again."
onRetry={() => undefined}
variant="error"
/>Without actions
No campaigns scheduled
Campaigns you schedule appear here.
import { MegaphoneIcon } from '@phosphor-icons/react';
import { EmptyState } from '@arbol-ai/ui';
<EmptyState
description="Campaigns you schedule appear here."
icon={<MegaphoneIcon aria-hidden />}
title="No campaigns scheduled"
/>Source
The examples above are src/components/empty-state/empty-state.examples.tsx, which the library’s tests render too.