Badge

Overview

Badges are small visual indicators that highlight quick, essential information. Use a badge to draw attention to a piece of content, such as a count, a status, or a short label.

Because badges are not interactive, they aren't meant to group, sort, or filter information. When you need those interactions, use tags instead.

<daff-badge>1</daff-badge>

Best practices

When to use

• Show a status, such as success, error, or new
• Display a small piece of metadata
• Provide quick, scannable context inside a UI

When not to use

• To group, sort, or filter information (use tags instead)
• For interactive elements, such as buttons or links

Usage

Import DAFF_BADGE_COMPONENTS into your component:

import { DAFF_BADGE_COMPONENTS } from '@daffodil/design/badge';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_BADGE_COMPONENTS,
  ],
})
export class CustomComponent {}

Anatomy

A badge is composed of a wrapper, an optional prefix, and a label:

<daff-badge>
  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
  Badge label
</daff-badge>

• <daff-badge>: The wrapper component that holds the badge content.
• [daffPrefix]: A leading visual, typically an icon, displayed before the label.
• Label: The content of the badge, projected as a child element.

Features

Icon support

Use the [daffPrefix] element to display a leading visual icon before the badge label.

<daff-badge status="success">
  <fa-icon [icon]="faCircleCheck" daffPrefix></fa-icon>
  Verified
</daff-badge>

Appearances

Use the appearance property to change the visual style of a badge.

<daff-badge appearance="filled">Filled</daff-badge>
<daff-badge appearance="outlined">Outlined</daff-badge>

Colors

Use the color property to change the color of a badge. The default color is light.

<div class="daff-example-badge-colors__wrapper">
	<daff-badge color="primary">Primary</daff-badge>
	<daff-badge color="secondary">Secondary</daff-badge>
	<daff-badge color="tertiary">Tertiary</daff-badge>
	<daff-badge color="theme">Theme</daff-badge>
	<daff-badge color="theme-contrast">Theme Contrast</daff-badge>
	<daff-badge color="dark">Dark</daff-badge>
	<daff-badge color="light">Light</daff-badge>
</div>

<div class="daff-example-badge-colors__wrapper">
	<daff-badge appearance="outlined" color="primary">Primary</daff-badge>
	<daff-badge appearance="outlined" color="secondary">Secondary</daff-badge>
	<daff-badge appearance="outlined" color="tertiary">Tertiary</daff-badge>
	<daff-badge appearance="outlined" color="theme">Theme</daff-badge>
	<daff-badge appearance="outlined" color="theme-contrast">Theme Contrast</daff-badge>
	<daff-badge appearance="outlined" color="dark">Dark</daff-badge>
	<daff-badge appearance="outlined" color="light">Light</daff-badge>
</div>

Sizes

Use the size property to change the size of a badge. The default size is md.

<daff-badge size="sm">Small</daff-badge>
<daff-badge size="md">Medium</daff-badge>
<daff-badge size="lg">Large</daff-badge>

Statuses

Use the status property to convey semantic meaning. A status takes precedence over color.

<div class="daff-example-badge-statuses__wrapper">
	<daff-badge status="info">Info</daff-badge>
	<daff-badge status="warn">Warn</daff-badge>
	<daff-badge status="critical">Critical</daff-badge>
	<daff-badge status="success">Success</daff-badge>
</div>

<div class="daff-example-badge-statuses__wrapper">
	<daff-badge status="info" appearance="outlined">Info</daff-badge>
	<daff-badge status="warn" appearance="outlined">Warn</daff-badge>
	<daff-badge status="critical" appearance="outlined">Critical</daff-badge>
	<daff-badge status="success" appearance="outlined">Success</daff-badge>
</div>

Accessibility

Badges are not interactive and do not receive focus.

Developer responsibilities

• Always provide a text label unless the icon is universally understood and accessible
• Use the status property to communicate semantic meaning