@carissa-io/components-empty-state

EmptyState: a centred block for "nothing here yet" with an icon, a title, a description and actions. A React component, SCSS-themed, with no other dependency.

npm i @carissa-io/components-empty-state

Use

import { EmptyState } from '@carissa-io/components-empty-state'

<EmptyState
    icon={<SearchIcon />}
    title={t('no_results')}
    title_level={2}
    description={t('try_another_search')}
    actions={<Button onClick={clear}>{t('clear_filters')}</Button>}
/>

| Prop | | |---|---| | icon | decorative node, rendered inside an aria-hidden wrapper | | title | the heading text | | title_level | 1 to 6 (default 3); anything else falls back to 3 | | description | a paragraph under the title | | children | extra content between the description and the actions | | actions | the app's buttons or links, laid out in a centred row | | size | sm, md (default) or lg: padding, icon and text sizes; anything else falls back to md | | as | the root tag: div (default), section or aside; anything else falls back to div |

className is appended; unknown props go to the root element. Slots that are empty (undefined, null, false, '') render nothing.

Accessibility

It is static content: the root has no role="status" or live region, so a screen reader only reads it when it navigates to it. When the block replaces results dynamically (a search that returns nothing), wrap it in a region with aria-live="polite", or pass aria-live and role="status" to it. Pick title_level to fit the page's heading outline. The icon is decorative; put the meaning in the title.

Style

@use '@carissa-io/components-empty-state/scss' with (
    $c-empty-state-padding: 4rem 2rem,
    $c-empty-state-icon-color: #888
);

Classes: c-empty-state (--sm, --md, --lg), c-empty-state__icon, c-empty-state__title, c-empty-state__description, c-empty-state__content and c-empty-state__actions. Every variable is !default (see scss/_variables.scss); the defaults are neutral, so the component works without a theme.

| Variable | Default | |---|---| | $c-empty-state-padding, -padding-sm, -padding-lg | 2rem 1rem, 1rem 0.75rem, 3rem 1.5rem | | $c-empty-state-gap, $c-empty-state-max-width | 0.75rem, 28rem | | $c-empty-state-icon-size, -icon-size-sm, -icon-size-lg | 2.5rem, 1.75rem, 3.5rem | | $c-empty-state-icon-color | rgb(0 0 0 / 0.5) | | $c-empty-state-title-color, -title-font-weight | inherit, 600 | | $c-empty-state-title-font-size, -sm, -lg | 1.125rem, 1rem, 1.375rem | | $c-empty-state-description-color | rgb(0 0 0 / 0.6) | | $c-empty-state-description-font-size, -sm, -lg | 0.9375rem, 0.875rem, 1rem | | $c-empty-state-actions-gap | 0.5rem |