EmptyState

Usage

• Use EmptyState to communicate that a page, panel, or table has no content to display and to guide users toward a solution.
• Use for first-use experiences, no-result states, error recovery, and feature promotion.
• Use EmptyState when the content area is empty. Use Banner when the page already has content and you need to surface a message alongside it.
• Include at least a title and description for most cases. Add actions to provide a clear path to resolving the empty state.
• Use the full composition (graphic, title, description, actions, footer) for brand-new user experiences.

Types

• Default (variant="default") -- informs users that data is unavailable and directs them to take action.
• Promotion (variant="promotion") -- introduces a feature with larger title styling, an optional eyebrow badge, and support for a graphic below the actions.

Appearance

• Pass an icon prop on EmptyStateTitle to display an icon above the title. Choose an icon that represents the missing content type, not the empty state itself.
• Use EmptyStateGraphic for custom illustrations or images in place of the default icon. In the default variant, graphics display above the title. In the promotion variant, graphics display below the actions.
• Do not combine icon on the title with a separate EmptyStateGraphic -- use one or the other.

Behaviors

• Eyebrow badge (eyebrow on EmptyStateTitle) -- renders a green label above the title. Use only with the promotion variant to categorize or label the feature being promoted.
• Footer (EmptyStateFooter) -- always renders below actions. Use for supplementary text and documentation links.

Content

• Write titles in sentence case. Name the missing content specifically -- avoid vague titles like "Nothing to see here."
• Frame promotion titles around the benefit of the feature, not as an absence or failure.
• Write descriptions that explain why the state occurred or suggest a next step. Limit to one or two sentences. Never restate the title without adding information.
• Limit actions to two buttons. Provide at least one primary action. Use the secondary action as an optional alternative.
• Write action labels that describe the specific action -- avoid vague labels like "Click here."
• Match tone to the situation: direct for errors, friendly for first-use experiences. Never blame the user.

Implementation Notes

• EmptyState is a compound component. Compose it with these subcomponents as children: EmptyStateTitle, EmptyStateDescription, EmptyStateActions, EmptyStateFooter, EmptyStateGraphic. All subcomponents are optional.
• The layout uses CSS grid with named areas -- subcomponents automatically arrange themselves regardless of which ones are included.
• EmptyState accepts only variant as its own prop (default "default"). It extends Box, so it also accepts Box props.
• EmptyStateTitle extends Heading (defaults to h3). It accepts icon (IconName) and eyebrow (string) props. When icon is set, it internally renders an EmptyStateGraphic with the icon -- do not wrap it in a separate EmptyStateGraphic.
• EmptyStateDescription and EmptyStateFooter extend Paragraph. EmptyStateActions wraps children in a ButtonGroup with groupVariant="spaced".
• EmptyStateGraphic extends Box and is a generic container for custom visual content (illustrations, images).
• React: pass content as children to each subcomponent. Ember: yield content in a default block ({{yield}}).
• Ember invocation: <PlumaEmptyState>, <PlumaEmptyStateTitle @icon="campaigns" @eyebrow="Label">, <PlumaEmptyStateDescription>, <PlumaEmptyStateActions>, <PlumaEmptyStateFooter>, <PlumaEmptyStateGraphic>.