Badge
<ax-badge> is a compact pill for status or labels. Content is projected. It supports six semantic
variants, solid or soft fill, and two sizes.
Import
Section titled “Import”import { AxBadgeComponent } from '@axisui-ng/data';<ax-badge variant="success">Active</ax-badge><ax-badge variant="info" appearance="soft">Beta</ax-badge><ax-badge variant="destructive" size="sm">Error</ax-badge>Variants & sizes
Section titled “Variants & sizes”| Option | Values | Default | Notes |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'destructive' | 'info' | 'outline' | 'default' | Semantic color. |
appearance | 'solid' | 'soft' | 'solid' | Solid fill vs tinted soft pill (outline reuses the outline look for soft). |
size | 'sm' | 'md' | 'md' | Pill height/padding. |
<ax-badge variant="success" appearance="solid" size="md">Solid</ax-badge><ax-badge variant="success" appearance="soft" size="sm">Soft</ax-badge>Inputs
Section titled “Inputs”| Input | Type | Default | Notes |
|---|---|---|---|
variant | BadgeVariant | 'default' | Visual / semantic style. |
appearance | BadgeAppearance | 'solid' | Fill style: solid or soft. |
size | BadgeSize | 'md' | Pill size. |
Accessibility
Section titled “Accessibility”A badge is decorative text by default. If it conveys a status not otherwise in the DOM, add an
aria-label or accompanying visible text so the meaning isn’t color-only.
Storybook
Section titled “Storybook”Interactive examples live in Storybook under Data / Badge. Run pnpm storybook to explore them.