web/lib/opal/src/components/cards/empty-message-card/README.md
Import: import { EmptyMessageCard, type EmptyMessageCardProps } from "@opal/components";
A pre-configured Card for empty states. Renders a transparent card with a dashed border containing a muted icon and message text using the Content layout.
| Prop | Type | Default | Description |
|---|---|---|---|
sizePreset | "secondary" | "main-ui" | "secondary" | Controls layout and text sizing |
icon | IconFunctionComponent | SvgEmpty | Icon displayed alongside the title |
title | string | RichStr | — | Primary message text (required) |
padding | 0 | 0.5 | 1 | 2 | 4 | 6 | 4 | Padding, as a spacing step (N / 4 rem). Closed set. |
ref | React.Ref<HTMLDivElement> | — | Ref forwarded to the root div |
sizePreset="main-ui" only| Prop | Type | Default | Description |
|---|---|---|---|
description | string | RichStr | — | Optional description text |
descriptionis not accepted whensizePresetis"secondary"(the default).
import { EmptyMessageCard } from "@opal/components";
import { SvgSparkle, SvgFileText, SvgActions } from "@opal/icons";
// Default empty state (secondary)
<EmptyMessageCard title="No items yet." />
// With custom icon
<EmptyMessageCard icon={SvgSparkle} title="No agents selected." />
// main-ui with description
<EmptyMessageCard
sizePreset="main-ui"
icon={SvgActions}
title="No Actions Found"
description="Provide OpenAPI schema to preview actions here."
/>
// Custom padding
<EmptyMessageCard padding={1} icon={SvgFileText} title="No documents available." />