Empty State Pull Hint

ProNew

An empty list that explains why it is empty, offers the main action and a Check again button, refreshes on pull and, when the refresh finds items, replaces the empty state and announces the count. Use this when a phone list can be empty because nothing has arrived yet and people will want to check again.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

actionLabel

Guide and examples

When to use it

Use it when a phone list can be empty because nothing has arrived yet and people will want to check again.

Do not use it for lists that are empty because of a filter (offer Clear filters) or because of an error (show the error).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`load`	`() => Promise<string[]>`	`required`	Fetch the items.
`actionLabel`	`string`	`"Add your first item"`	The main action.
`onAction`	`() => void`	`-`	Called by the main action.

Accessibility

The empty state is a labelled region with a heading; Check again is a button, so the pull is optional.
After a refresh the result is announced: "2 items found" or "Nothing yet".
Items replace the empty state without moving focus away from the Check again control unexpectedly (focus moves to the list).

Testing

The pattern ships with a Testing Library test (empty-state-pull-hint.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a phone list can be empty because nothing has arrived yet and people will want to check again.

Do not use it for lists that are empty because of a filter (offer Clear filters) or because of an error (show the error).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`load`	`() => Promise<string[]>`	`required`	Fetch the items.
`actionLabel`	`string`	`"Add your first item"`	The main action.
`onAction`	`() => void`	`-`	Called by the main action.

Accessibility

The empty state is a labelled region with a heading; Check again is a button, so the pull is optional.
After a refresh the result is announced: "2 items found" or "Nothing yet".
Items replace the empty state without moving focus away from the Check again control unexpectedly (focus moves to the list).

Testing

The pattern ships with a Testing Library test (empty-state-pull-hint.test.tsx) that drives it through roles and the keyboard.