import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as SectionMessageStories from './SectionMessage.stories';
<Meta of={SectionMessageStories} name='Usage' />
<Title />
## Purpose
A copy of the PDS v2 Section Message with an `agentic` type, whose leading icon is the Agent Avatar. It alerts users to a particular section of the screen.
## Implementation
- `avatarProps`: options for the Agent Avatar, the leading icon of the `agentic` type (`hasHalo`, `shape`, `size`, `label`); passing it on another `type` shows the avatar there
- `badgeIcon`, `badgeLabel`: optional badge beside the title, colored to match `type`
- `ctaButton`, `ctaIcon`: optional call to action button and its leading icon
- `isDismissible`, `onDismiss`, `dismissLabel`: dismiss behavior
- `message`: the content
- `secondaryCta`: optional lesser action, rendered before `ctaButton`
- `title`: optional heading
- `type`: `info`, `success`, `warning`, `critical`, `discovery` or `agentic`
- `iconName`: the icon of the Agent Avatar for `agentic`, `zappy` or `sparklesSolid`
- `typeLabels`: the type names read out by screen readers
<hr />
<Canvas of={SectionMessageStories.Default} />
<Controls of={SectionMessageStories.Default} />
Section Message
A copy of the PDS v2 Section Message (pds-section-message, same class names, props and behavior) with an agentic type (AI gradient border on a surface fill, the Agent Avatar as its leading icon (decided 2026-10-21; iconName picks its icon), the standard secondary Button as the CTA, a silver-muted Badge) and an avatarProps option for the avatar (halo, shape, size).
Extends a PDS componentOpen in Storybook