Badge

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

01 Hero Preview

Grid: 8px · Scale: 1:1

Stable Ready Internal Requires review Open docs

02 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>

03 Examples

Basic

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

Component Sheet

Grid: 8px · Scale: 1:1

New

Variants

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

Component Sheet

Grid: 8px · Scale: 1:1

Default Secondary Success Destructive Outline Ghost Link

Icons

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

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

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.

Component Sheet

Grid: 8px · Scale: 1:1

Open release notes

04 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.

Component Sheet

Grid: 8px · Scale: 1:1

Team owned Shipped

05 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

06 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: var(--frame-radius-sm);
  --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-success-bg: color-mix(in srgb, var(--frame-success) 16%, var(--frame-surface));
  --frame-badge-success-border: color-mix(in srgb, var(--frame-success) 32%, transparent);
  --frame-badge-success-color: color-mix(in srgb, var(--frame-success) 78%, var(--frame-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;