Replacement Content

Anatomy

┌──── Replacement Content Container (262×56 px) ────┐
│  [!]  No content available                         │
└────────────────────────────────────────────────────┘

1. Container — Fixed width 262 px, height 56 px, radius --ds-radius-lg
2. Icon — 16×16 px info icon, color --ds-color-text-description
3. Placeholder Text — Brief description of the current state, color --ds-color-text-description

Usage Guidelines

✅ Do

• Use when primary content is genuinely unavailable (empty list, no search results, load failure)
• Keep placeholder text concise and clear, helping users quickly understand the state (e.g. "No products found")
• Center it in the page hierarchy to avoid confusion with other content

❌ Don't

• Don't embed complex interactive components inside replacement content
• Don't use it as a loading placeholder — use Skeleton or Spinner for loading states
• Don't omit the placeholder text — a blank area gives users no context

Interaction Behavior

Replacement Content is a display-only component with no interactive behavior. Its visibility is controlled by the parent container's logic.

Accessibility