WidgetPlaceholder

An empty-state placeholder for a dashboard widget — header, illustration, message, and action.

Usage

import {
  WidgetPlaceholder,
  WidgetPlaceholderHeader,
  WidgetPlaceholderIcon,
  WidgetPlaceholderTitle,
  WidgetPlaceholderContent,
  WidgetPlaceholderImage,
  WidgetPlaceholderText,
  WidgetPlaceholderAction,
  WidgetPlaceholderFooter,
} from '@acronis-platform/ui-react';

WidgetPlaceholder is a composable empty-state for a dashboard widget: a bordered card with a header (icon + title), a centered illustration / message / action, and an optional footer. Set interactive to make the whole card focusable and clickable. This is a design-pending v1 on semantic tokens; a --ui-widget-placeholder-* tier is pending a Figma pass.

Examples

<WidgetPlaceholder className="h-[220px] w-[320px]">
  <WidgetPlaceholderHeader>
    <WidgetPlaceholderIcon><ChartBarVerticalIcon /></WidgetPlaceholderIcon>
    <WidgetPlaceholderTitle>Backup statistics</WidgetPlaceholderTitle>
  </WidgetPlaceholderHeader>
  <WidgetPlaceholderContent>
    <WidgetPlaceholderImage><ChartBarVerticalIcon /></WidgetPlaceholderImage>
    <WidgetPlaceholderText>No data available yet</WidgetPlaceholderText>
    <WidgetPlaceholderAction>Set up backup plan</WidgetPlaceholderAction>
  </WidgetPlaceholderContent>
</WidgetPlaceholder>

A clickable widget tile with a footer:

<WidgetPlaceholder interactive className="w-[320px]" onClick={configure}>
  <WidgetPlaceholderHeader>
    <WidgetPlaceholderIcon><ShieldCheckIcon /></WidgetPlaceholderIcon>
    <WidgetPlaceholderTitle>Protection status</WidgetPlaceholderTitle>
  </WidgetPlaceholderHeader>
  <WidgetPlaceholderContent>
    <WidgetPlaceholderImage><ShieldCheckIcon /></WidgetPlaceholderImage>
    <WidgetPlaceholderText>No devices protected</WidgetPlaceholderText>
  </WidgetPlaceholderContent>
  <WidgetPlaceholderFooter>Last checked: never</WidgetPlaceholderFooter>
</WidgetPlaceholder>

Accessibility

The static placeholder is presentational — the parts are plain elements with no imposed roles, so their text is read in document order. interactive only makes the root focusable (tabindex=0) and paints the focus ring; it adds no role and no key handling. Prefer putting the real control inside — a Button/Link in WidgetPlaceholderAction — so it has an accessible name and keyboard semantics. If the whole card must be the only control, also give it role="button", an aria-label, and Enter/Space handling. Keep the meaning in WidgetPlaceholderText; the illustration is decorative.

API Reference

Not `ChartState`

ChartState is the placeholder that goes inside a chart's slot: it fills the slot, renders loading / empty / error, and for empty draws the silhouette the design defines for that chart type. WidgetPlaceholder is the composable skeleton for a whole tile.

Reach for ChartState when a chart has no data; for this when the widget itself isn't there yet.

Edit on GitHub