import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';
import * as BadgeStories from './Badge.stories';
<Meta of={BadgeStories} name='Usage' />
<Title />
## Purpose
Proposed addition to the existing PDS badge component. A Badge component used to denote an agentic category.
## Implementation
- `color`: solid or muted variant of each color; `ai-active` is an animated gradient fill and `agentic-filled` is the AI gradient as the fill, neither with a muted twin
- `iconName`: optional leading icon, sized to fit `size`
- `label`: the badge content
- `size`: `xs`, `s` (default) or `m`
<hr />
<Canvas of={BadgeStories.Agentic} />
<Controls of={BadgeStories.Agentic} />
Badge
A copy of the PDS v2 Badge (pds-badge, same class names, props and CSS) with one addition: color='agentic-filled', the AI gradient as the fill, for denoting an agentic category.
Extends a PDS componentOpen in Storybook