Badge

Small metadata labels for state, tags, and secondary status.

Preview

Stable Internal Requires review Open docs

Usage

import { FrBadgeModule } from '@frame-ui-ng/components/badge';
import { FrSpinnerModule } from '@frame-ui-ng/components/spinner';

HTML

<a frBadge href="/docs" variant="link">
  <ng-icon frBadgeIcon position="inline-start" name="tablerPlus" />
  <span frBadgeLabel>Open docs</span>
  <span frSpinner size="xs"></span>
</a>

Examples

Basic

Use the default badge for compact state labels, tags, or lightweight status chips.

New

Variants

Switch the variant to match the amount of emphasis you want, from filled badges to outline, ghost, and link-like treatments.

Default Secondary Destructive Outline Ghost Link

Icons

Use leading or trailing icons when the badge needs directional meaning, category cues, or a stronger visual hook.

Beta Export

Loading states

Inline spinners work well for optimistic mutations, background sync, or short-lived publishing states and share the same token contract as the Spinner component.

Syncing Publishing

Links

Use the link variant on anchor hosts when a badge should behave more like compact inline navigation than a filled status pill.

Open release notes

Custom Styling

Override badge tokens on a local wrapper when a product area needs denser spacing, a different radius, or adjusted icon sizing while keeping the same badge markup.

Team owned Shipped

Token Inspector

Hover the badge shell, icon, label, or spinner to inspect the tokens that control spacing, sizing, focus treatment, and loading affordances. Click a region to pin the inspector while you review the current values.

Publishing

Design Tokens

Use these CSS custom properties to tune badge spacing, pill sizing, focus treatment, icon offsets, and the shared spinner behavior without changing the component structure.

SCSS


  --frame-badge-root-gap: 0.25rem;
  --frame-badge-root-min-height: 1.375rem;
  --frame-badge-root-radius: 999px;
  --frame-badge-root-font-size: 0.75rem;
  --frame-badge-root-font-weight: 600;
  --frame-badge-root-bg: var(--frame-primary);
  --frame-badge-root-color: var(--frame-primary-foreground);
  --frame-badge-root-padding-block: 0.1875rem;
  --frame-badge-root-padding-inline: 0.625rem;
  --frame-badge-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-ring) 24%, transparent);
  --frame-badge-root-transition-duration: 150ms;
  --frame-badge-link-underline-offset: 0.1875rem;
  --frame-badge-icon-size: 0.475rem;
  --frame-badge-icon-offset: -0.125rem;
  --frame-spinner-size: var(--frame-badge-icon-size);
  --frame-spinner-stroke: 0.125rem;
  --frame-spinner-track-color: color-mix(in srgb, currentColor 24%, transparent);
  --frame-spinner-indicator-color: currentColor;
  --frame-spinner-duration: 700ms;