General

Badge

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays a badge or a component that looks like a badge.

Usage#

app.component.ts

import { WdsBadgeComponent } from '@wds/angular/badge';

Examples#

Default#

Badge

Secondary

Destructive

Outline

Ghost

Show code

badge-default.ts

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';

@Component({
  selector: 'app-badge-default-demo',
  imports: [WdsBadgeComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      <wds-badge>Badge</wds-badge>
      <wds-badge variant="secondary">Secondary</wds-badge>
      <wds-badge variant="destructive">Destructive</wds-badge>
      <wds-badge variant="outline">Outline</wds-badge>
      <wds-badge variant="ghost">Ghost</wds-badge>
    </div>
  `,
})
export class BadgeDefaultDemo {}

With icon#

Verified

Bookmark

Show code

badge-with-icon.ts

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';

@Component({
  selector: 'app-badge-with-icon-demo',
  imports: [WdsBadgeComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      <wds-badge variant="secondary">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" /><path d="m9 12 2 2 4-4" /></svg>
        Verified
      </wds-badge>
      <wds-badge variant="outline">
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
        Bookmark
      </wds-badge>
    </div>
  `,
})
export class BadgeWithIconDemo {}

Link#

With href the badge renders a native <a>. target="_blank" adds rel="noopener noreferrer" unless you set rel.

Open link

Link variant

Show code

badge-link.ts

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';

@Component({
  selector: 'app-badge-link-demo',
  imports: [WdsBadgeComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      <wds-badge href="#">
        Open link
        <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h10v10" /><path d="M7 17 17 7" /></svg>
      </wds-badge>
      <wds-badge variant="link" href="#">Link variant</wds-badge>
    </div>
  `,
})
export class BadgeLinkDemo {}

Custom colors#

--wds-badge-bg, --wds-badge-fg and --wds-badge-border override the colors of the variant.

Blue

Green

Sky

Purple

Red

Show code

badge-custom-colors.ts

import { Component } from '@angular/core';
import { WdsBadgeComponent } from '@wds/angular/badge';

@Component({
  selector: 'app-badge-custom-colors-demo',
  imports: [WdsBadgeComponent],
  template: `
    <div class="flex flex-wrap gap-2">
      <wds-badge class="[--wds-badge-bg:oklch(0.97_0.014_254.604)] [--wds-badge-fg:oklch(0.488_0.243_264.376)] dark:[--wds-badge-bg:oklch(0.282_0.091_267.935)] dark:[--wds-badge-fg:oklch(0.809_0.105_251.813)]">Blue</wds-badge>
      <wds-badge class="[--wds-badge-bg:oklch(0.982_0.018_155.826)] [--wds-badge-fg:oklch(0.527_0.154_150.069)] dark:[--wds-badge-bg:oklch(0.266_0.065_152.934)] dark:[--wds-badge-fg:oklch(0.871_0.15_154.449)]">Green</wds-badge>
      <wds-badge class="[--wds-badge-bg:oklch(0.977_0.013_236.62)] [--wds-badge-fg:oklch(0.5_0.134_242.749)] dark:[--wds-badge-bg:oklch(0.293_0.066_243.157)] dark:[--wds-badge-fg:oklch(0.828_0.111_230.318)]">Sky</wds-badge>
      <wds-badge class="[--wds-badge-bg:oklch(0.977_0.014_308.299)] [--wds-badge-fg:oklch(0.496_0.265_301.924)] dark:[--wds-badge-bg:oklch(0.291_0.149_302.717)] dark:[--wds-badge-fg:oklch(0.827_0.119_306.383)]">Purple</wds-badge>
      <wds-badge class="[--wds-badge-bg:oklch(0.971_0.013_17.38)] [--wds-badge-fg:oklch(0.505_0.213_27.518)] dark:[--wds-badge-bg:oklch(0.258_0.092_26.042)] dark:[--wds-badge-fg:oklch(0.808_0.114_19.571)]">Red</wds-badge>
    </div>
  `,
})
export class BadgeCustomColorsDemo {}

API References#

wds-badge#

A badge, e.g. a status label. With href it renders a native <a>.

Attributes

Attribute	Type	Default	Description
variant	WdsBadgeVariant	'default'	Visual variant.
href	string \| undefined		Link URL. Without it the badge is a plain `<span>`.
target	string \| undefined		Link target, e.g. `_blank`.
rel	string \| undefined		Link `rel`. With `target="_blank"` it defaults to `noopener noreferrer`.

Slots

Slot	Description
(default)	Content (text, `<svg>` icon).

CSS parts (::part)

Part	Description
badge	The inner `<span>` or `<a>`.

CSS custom properties

Property	Description
--wds-badge-bg	Custom background (overrides the variant).
--wds-badge-fg	Custom text color (overrides the variant).
--wds-badge-border	Custom border color (overrides the variant).

Accessibility#

wds-badge renders a <span> with its content as text, or with href a native <a> with the link role.

A badge is not announced as a status: when it shows a change that users need to hear about, put the text in a live region. Give icons aria-hidden="true".

Keyboard support#

Key	Function
Tab	Moves focus to a badge with `href`. A badge without `href` is not focusable.
Enter	Follows the link.

Usage#

Examples#

Default#

With icon#

Link#

Custom colors#

API References#

wds-badge#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#