Badge - Bellhop Design System

When to use

Use badges to label, categorize, or organize items using keywords that describe them.

Status Indicators

Display status information like Active, Pending, Approved, or Rejected.

Notification Counts

Show unread message counts, notification numbers, or item quantities.

Labels and Tags

Categorize content with labels like New, Featured, or Beta.

Metadata

Display supplementary information like version numbers or priority levels.

When not to use

As a clickable button—use actual buttons with clear labels instead
For long text content—badges are designed for short labels only
When color is the only differentiator—ensure accessible alternatives
For critical status information that requires more context—use notifications or alerts

Anatomy

Badges consist of a compact container with text and optional icons.

Featured

Container
Rounded background shape with padding and semantic color
Leading Icon (Optional)
Icon displayed before the text for visual context
Label Text
Brief text describing the status or category
Trailing Icon (Optional)
Icon displayed after text, often for dismissible badges

Examples

Interact with live examples and copy the code to use in your project.

Badge Variants

Semantic color variants for different states and contexts

High emphasis

Medium emphasis

Low emphasis

chevron_right HTML

<bh-badge variant="primary">Primary</bh-badge>
<bh-badge variant="success">Success</bh-badge>
<bh-badge variant="warning">Warning</bh-badge>
<bh-badge variant="error">Error</bh-badge>
<bh-badge variant="neutral">Neutral</bh-badge>

chevron_right React

import { BhBadge } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      <BhBadge variant="primary">Primary</BhBadge>
      <BhBadge variant="success">Success</BhBadge>
      <BhBadge variant="warning">Warning</BhBadge>
      <BhBadge variant="error">Error</BhBadge>
      <BhBadge variant="neutral">Neutral</BhBadge>
    </>
  );
}

chevron_right Angular

<bh-badge variant="primary">Primary</bh-badge>
<bh-badge variant="success">Success</bh-badge>
<bh-badge variant="warning">Warning</bh-badge>
<bh-badge variant="error">Error</bh-badge>
<bh-badge variant="neutral">Neutral</bh-badge>

Badge with Icons

Badges can include icons for additional visual context

chevron_right HTML

<bh-badge variant="success" leading-icon="check_circle">Approved</bh-badge>
<bh-badge variant="warning" leading-icon="warning">Pending</bh-badge>
<bh-badge variant="error" leading-icon="cancel">Rejected</bh-badge>

chevron_right React

import { BhBadge } from '@actabldesign/bellhop-react';

function MyComponent() {
  return (
    <>
      <BhBadge variant="success" leadingIcon="check_circle">Approved</BhBadge>
      <BhBadge variant="warning" leadingIcon="warning">Pending</BhBadge>
      <BhBadge variant="error" leadingIcon="cancel">Rejected</BhBadge>
    </>
  );
}

chevron_right Angular

<bh-badge variant="success" leading-icon="check_circle">Approved</bh-badge>
<bh-badge variant="warning" leading-icon="warning">Pending</bh-badge>
<bh-badge variant="error" leading-icon="cancel">Rejected</bh-badge>

Interaction

Most badges are static displays, but some support interaction for filtering or removal.

Static Display

Non-interactive badges serve as pure visual indicators without click handlers.

Dismissible

Badges with close icons allow users to remove filters, tags, or labels.

Disabled

Notification Badges

Numerical badges update in real-time to reflect current counts.

Placement

Badges can be placed inline with content or overlaid on other UI elements.

Inline with Text

Place next to headings, in lists, or within content to label items.

On Avatars and Icons

Overlay numerical badges on avatars or icons to show counts or status.

In Tables

Use in table cells to display status, priority, or category information.

Filter Lists

Show active filters as dismissible badges above filtered content.

Accessibility

Badges are designed to be accessible with proper color contrast and semantic meaning.

Color and Meaning

Don't rely solely on color to convey meaning
Use clear, descriptive text labels
Pair colors with icons when appropriate
Ensure sufficient color contrast for all variants

Keyboard Support

Tab: Focus on interactive badges
Enter/Space: Activate clickable or dismissible badges
Non-interactive badges are excluded from tab order

Screen Reader Support

Badge text is announced to screen readers
Status badges include semantic ARIA roles when appropriate
Dismissible badges announce their interactive nature
Numerical badges on icons include descriptive labels

Visual Design

Minimum text size for readability
Clear visual separation from surrounding content
Sufficient padding for touch targets on interactive badges
Focus indicators on interactive badges

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Tag	Use for categorization and filtering, typically removable.
Avatar	Combine with badges to show user status or notification counts.
Notification	Use for more prominent, actionable status messages.
Tooltip	Combine to provide additional context for badge meanings.

Resources

Design and development resources for the Badge component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →