Badge
Directive for applying Kikita UI badge styling to inline status or metadata elements.
Import the public directive from the published package entrypoint.
import { KuiBadgeDirective } from '@kikita-labs/ui';kuiBadge is an attribute directive, so it can be used on inline semantic elements such as span, strong, code, or a.
<div class="badge-example">
<span kuiBadge>Neutral</span>
<strong kuiBadge appearance="success">Ready</strong>
<code kuiBadge appearance="warning">Review</code>
<a kuiBadge appearance="info" href="#api">API reference</a>
</div>appearance maps the badge to a semantic status color. Defaults to neutral.
NeutralPrimarySuccessWarningDangerInfo
<div class="badge-appearance-example">
<span kuiBadge appearance="neutral">Neutral</span>
<span kuiBadge appearance="primary">Primary</span>
<span kuiBadge appearance="success">Success</span>
<span kuiBadge appearance="warning">Warning</span>
<span kuiBadge appearance="danger">Danger</span>
<span kuiBadge appearance="info">Info</span>
</div>Use the shared Kikita size scale to match badge density to surrounding content.
Extra smallSmallMediumLarge
<div class="badge-size-example">
<span kuiBadge size="xs" appearance="primary">Extra small</span>
<span kuiBadge size="sm" appearance="primary">Small</span>
<span kuiBadge size="md" appearance="primary">Medium</span>
<span kuiBadge size="lg" appearance="primary">Large</span>
</div>Inputs verified against @kikita-labs/ui v1.6.1 public typings.
| Name | Type | Default | Description |
|---|---|---|---|
| appearance | 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'neutral' | Visual badge treatment mapped to Kikita UI status tokens. |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Badge size mapped to Kikita UI text and spacing tokens. |
| --kui-badge-height | CSS length | 22px | Badge block size. Overridden per size by the size input. |
| --kui-badge-px | CSS length | 8px | Inline padding. Overridden per size by the size input. |
| --kui-badge-radius | CSS length | var(--kui-radius-full) | Corner radius of the badge surface. |
| --kui-badge-font-size | CSS length | 11px | Badge label font size. Overridden per size by the size input. |
| --kui-badge-neutral-bg | CSS color | - | Background color for the neutral appearance (default). |
| --kui-badge-primary-bg | CSS color | - | Background color for the primary appearance. |
| --kui-badge-success-bg | CSS color | - | Background color for the success appearance. |
| --kui-badge-warning-bg | CSS color | - | Background color for the warning appearance. |
| --kui-badge-danger-bg | CSS color | - | Background color for the danger appearance. |
| --kui-badge-info-bg | CSS color | - | Background color for the info appearance. |
Badge is a styling-only directive; it does not add or replace element semantics.
kuiBadgeapplies visual treatment only. It does not add a role or accessible name, so choose a host element whose native semantics already fit (span,strong, orafor a linked badge).- Do not rely on color alone to convey status. Keep a visible text label inside the badge for every appearance.
- When a badge duplicates state already announced elsewhere (for example next to a status icon), avoid redundant announcements by keeping the text concise instead of adding extra ARIA attributes.