Storybook stories for the `NoData` empty-state component, covering the full range of compositional variants from a complete layout to individual sub-components.
## Key Components
| Export | Description |
|---|---|
| `Default` | Full composition with icon, title, description, feature actions, and Mingo CTA button |
| `MessageTitleOnly` | Minimal state showing only an icon and title |
| `WithoutActions` | Layout without the feature actions block |
| `WithoutButton` | Layout without the footer CTA button |
| `TwoActions` / `FourActions` | Dynamic action block with 2 or 4 items |
| `ButtonAsLink` | CTA button rendered as an anchor (`href`) instead of a click handler |
| `CustomButton` | Escape-hatch story passing arbitrary JSX via the `button` prop |
| `StandaloneActions` | Renders `NoDataActions` + `NoDataAction` sub-components in isolation |
| `StandaloneMessage` | Renders the `NoDataMessage` sub-component in isolation |
| `Showcase` | Side-by-side gallery of the three most common configurations |
## Usage Example
```typescript
// Full composition (mirrors the Default story)
}
title="No data available"
description="Start by adding an item"
actions={[
{ icon: , label: 'Real-time sync' },
{ icon: , label: 'Smart suggestions' },
{ icon: , label: 'Unlimited storage' },
]}
buttonLabel="Ask Mingo about Item"
buttonIcon={}
onButtonClick={() => openMingoPanel()}
/>
// Custom footer via escape hatch
}
title="No sources configured"
description="Connect a source to get started"
button={
}>Connect source
}>View docs
}
/>
```
## Notes
- Stories are registered under **UI/EmptyState** in the Storybook sidebar.
- `icon`, `actions`, `button`, `buttonIcon`, `onButtonClick`, and `buttonProps` controls are disabled in the Storybook controls panel; `title`, `description`, and `buttonLabel` accept free-text input.
- The `MingoIcon` CTA uses design-token CSS variables (`--ods-flamingo-cyan-base`) for brand-consistent colouring.