ErrorPlacard

Inline failed-load placard with a destructive icon chip, title, body, and optional recovery actions.

Basic Usage

An inline placard for failed-load states: a destructive-tinted icon chip on the left, title and body in the middle, and an optional action cluster on the right.

Could not load members

The request timed out. Check your connection and try again.

With Recovery Actions

Use the actions prop to provide a right-aligned cluster of recovery buttons such as retry or dismiss.

Could not load members

The request timed out. Check your connection and try again.

Installation

npx visor add error-placard

This copies two files into your project:

components/ui/error-placard/error-placard.tsx — the component
components/ui/error-placard/error-placard.module.css — the styles

Usage

import { ErrorPlacard } from '@/components/ui/error-placard/error-placard';

<ErrorPlacard
  icon={<WarningCircle weight="fill" />}
  title="Could not load data"
  body="The request timed out."
/>

API Reference

ErrorPlacardProps

No props data available for “error-placard”.

The component also accepts all standard <div> HTML attributes except title (shadowed by the typed prop).

Accessibility

Renders with role="alert", which announces the content to screen readers immediately upon mount.
The icon container carries aria-hidden="true" — supply meaningful title and body text so the announcement is fully descriptive.
When using actions, ensure each button has a clear accessible label.
For non-urgent inline messages, consider using Alert instead.