Empty state

import { EmptyState } from '@yarcl/react';

No matching projects

Try changing or clearing your filters.

Clear filtersCreate project

<EmptyState
  icon={<SearchIcon />}
  title="No matching projects"
  description="Try changing or clearing your filters."
  actions={<Button variant="outline">Clear filters</Button>}
/>

gap, padding, color and textStyle use keys from your config and can be set in components.EmptyState. The icon is decorative and receives color; the description receives textStyle.

Accessibility

The title is a semantic heading. Set headingLevel to fit the surrounding page outline. Empty states are static content and do not announce themselves as live regions. Add a live region separately when an empty state appears in response to an asynchronous action and needs an announcement.

Spacing props accept typed breakpoint maps. See responsive props for supported props, defaults and examples.

Props

Prop	Type	Default	Description
title required	ReactNode		Main message.
actions	ReactNode		Actions shown below the description, usually buttons or links.
color	Colorconfig	config.defaults.color	Icon color, from the colors config.
description	ReactNode		Supporting text below the title.
gap	Responsive<Spacing>config	config.defaults.gap	Space between content, from the spacing config. Accepts a scalar or breakpoint map.
headingLevel	3 | 2 | 4 | 1 | 5 | 6	2	Semantic heading level for the title.
icon	ReactNode		Decorative content shown above the title.
padding	Responsive<Spacing>config	config.defaults.padding	Inner spacing, from the spacing config. Accepts a scalar or breakpoint map.
textStyle	TextStyleconfig	config.defaults.textStyle	Description typography, from the typography.styles config.