Badge

Material Design 3 badge indicators for status, notifications, and labels

Compatibility And Long Labels

badge-outlined is canonical; badge-outline and the existing secondary/tertiary outlined shortcuts remain supported. badge-soft keeps its semantic container colors. badge-filled and badge-md explicitly represent the default style/size. Long labels now wrap inside bounded containers. badge-notification positions against an application-provided positioned wrapper and mirrors in RTL. badge-removable styles a named native button; the application handles removal and restores focus after removing an item. See Indicator for standalone dots with visible text, rather than color-only meaning.

Badge

Badges are small status descriptors for UI elements. They can display notification counts, status indicators, or labels.

Basic Usage

Basic Badge

New

Color Variants

Brand Colors

Brand Color Badges

Primary Secondary Tertiary Accent Neutral Base

Semantic Colors

Semantic Color Badges

Success Error Warning Info

Neutral

Neutral Badge

Neutral

Style Variants

Filled (Default)

Filled badges have a solid background:

Filled Badges

Filled Success

Tonal

Tonal badges use a subtle background with the theme’s container colors:

Tonal Badges

Tonal Info

Outlined

Outlined badges have only a border:

Outlined Badges

Outlined Warning

Sizes

Badge Sizes

Small Medium Large

Notification Badges

Basic Notification

Notification badges are typically positioned on buttons or icons:

Notification Badge on Button

5

With Icon

Notification Badge on Icon

99+

Dot Badges

Small status indicators without text:

Dot Badges

Dot with Label

Dot Badges with Labels

Online
Away
Offline

Removable Badges

Badges with a close button (requires JavaScript):

Removable Badge

Tag Name

Use Cases

Status Indicators

Status Indicator Badges

Active Pending Expired

Category Tags

Category Tag Badges

Technology Design Development Tutorial

User Roles

User Role Badge

User
Jane Doe Admin

jane@example.com

Pill Labels

Pill Label Badge

Premium Plan

Recommended

$29.99/month

Counts

Count Badges

Table Badges

Table with Status Badges

Order ID Status Amount
#1234 Completed $99.99
#1235 Processing $149.99
#1236 Failed $79.99

Best Practices

Color Semantics

Use colors consistently to convey meaning:

  • Success (Green): Completed, Active, Available
  • Warning (Yellow): Pending, Caution, In Progress
  • Error (Red): Failed, Inactive, Urgent
  • Info (Blue): Informational, New, Featured

Size Guidelines

  • Small (badge-sm): Use in compact spaces, tables, or alongside small text
  • Medium (default): Standard usage
  • Large (badge-lg): Use for emphasis or with larger text

Accessibility

  • Use meaningful text in badges
  • Ensure sufficient color contrast
  • Provide context for screen readers

Accessible Badges

Payment Received

Don’t Overuse

Limit the number of badges to avoid visual clutter:

Good: Limited Badges

Article Title New

Article Title New Featured Popular Trending

Framework Examples

React

interface BadgeProps {
  variant?: 'filled' | 'tonal' | 'outlined';
  color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'error' | 'warning' | 'info';
  size?: 'sm' | 'md' | 'lg';
  children: React.ReactNode;
}

export function Badge({ variant = 'filled', color = 'primary', size = 'md', children }: BadgeProps) {
  return (
    <span className={`badge badge-${variant} badge-${color} badge-${size}`}>
      {children}
    </span>
  );
}

// Usage
<Badge variant="tonal" color="success">Active</Badge>

Vue

<template>
  <span :class="`badge badge-${variant} badge-${color} badge-${size}`">
    <slot />
  </span>
</template>

<script setup>
defineProps({
  variant: {
    type: String,
    default: 'filled'
  },
  color: {
    type: String,
    default: 'primary'
  },
  size: {
    type: String,
    default: 'md'
  }
})
</script>

<!-- Usage -->
<Badge variant="tonal" color="success">Active</Badge>

API Reference

Class Names

Class Description
.badge Base badge styles (required)
.badge-primary Primary color
.badge-secondary Secondary color
.badge-tertiary Tertiary color
.badge-accent Accent color
.badge-neutral Neutral color
.badge-base Theme base color
.badge-success Success color (green)
.badge-error Error color (red)
.badge-warning Warning color (yellow)
.badge-info Info color (blue)
.badge-filled Filled variant (default)
.badge-tonal Tonal variant
.badge-outlined Outlined variant
.badge-sm Small size
.badge-md Medium size (default)
.badge-lg Large size
.badge-dot Dot indicator
.badge-notification Notification badge with positioning
.badge-removable Removable badge styling

Combinations

Combine variant, color, and size:

Combined Badge Variants

Small Tonal Success Large Outlined Warning
  • Button - Buttons with badge counts
  • Card - Cards with status badges
  • Alert - Alert notifications

See Also