Skip to content

Empty

New
Display a title, description, and actions when there is no content to display.

To display an empty state, pass title (required) and icon (optional) to <Empty>.

No results

import { Empty } from "stylus-ui/Empty";
export default () => <Empty title="No results" />;

Use <EmptyDescription> to provide additional context about why content is empty. Ideally, offer an action the users can take to resolve the empty state.

No results

We couldn't find anything. Try adjusting your search or filters.
import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Empty, EmptyDescription } from "stylus-ui/Empty";
export default () => (
<Empty icon={faMagnifyingGlass} title="No results">
<EmptyDescription>
We couldn't find anything. Try adjusting your search or filters.
</EmptyDescription>
</Empty>
);

To display buttons or other actions below the empty state, wrap them in <EmptyActions>.

No results

Try adjusting your search or filters to find what you're looking for.
import { faMagnifyingGlass } from "@fortawesome/pro-regular-svg-icons";
import { Empty, EmptyDescription, EmptyActions } from "stylus-ui/Empty";
import { Button } from "stylus-ui/Button";
export default () => (
<Empty icon={faMagnifyingGlass} title="No results">
<EmptyDescription>
Try adjusting your search or filters to find what you're looking for.
</EmptyDescription>
<EmptyActions>
<Button variant="secondary">Clear filters</Button>
<Button variant="secondary">Go back</Button>
</EmptyActions>
</Empty>
);

Display a title, description, and actions when there is no content to display.

title

Required
string

The title of the empty state.


children

ReactNode

Child components such as EmptyDescription and EmptyActions.


className

string

Optional styles to apply to the empty state container.


icon

IconDefinition

The icon to display in the empty state.


Display a description below the title in an Empty component.

children

ReactNode

Contents of the description.


A container for displaying buttons, links, or other actions below the title and description of Empty.

children

ReactNode

Contents of the actions.