Badge

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

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

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

ClassDescription
.badgeBase badge styles (required)
.badge-primaryPrimary color
.badge-secondarySecondary color
.badge-tertiaryTertiary color
.badge-successSuccess color (green)
.badge-errorError color (red)
.badge-warningWarning color (yellow)
.badge-infoInfo color (blue)
.badge-neutralNeutral color (gray)
.badge-filledFilled variant (default)
.badge-tonalTonal variant
.badge-outlinedOutlined variant
.badge-smSmall size
.badge-mdMedium size (default)
.badge-lgLarge size
.badge-dotDot indicator
.badge-notificationNotification badge with positioning
.badge-removableRemovable 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