Small count and labeling component for displaying status, counts, or categories.

Introduction

Badges are compact elements used to display status indicators, counts, or category labels. They scale relative to their parent and support multiple visual styles.

Installation

import { Badge } from '@/components/ui/badge';

Usage

<Badge>Badge</Badge>

Examples

Default

Badge

BadgeDefault

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return <Badge>Badge</Badge>;
}

Variants

Use the variant prop to change the visual style.

FilledOutlinedTonal

BadgeVariants

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="filled">Filled</Badge>
      <Badge variant="outlined">Outlined</Badge>
      <Badge variant="tonal">Tonal</Badge>
    </div>
  );
}

Themes

Use the theme prop to change the color.

PrimarySecondarySuccessDangerWarningInfoLightDark

BadgeThemes

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge theme="primary">Primary</Badge>
      <Badge theme="secondary">Secondary</Badge>
      <Badge theme="success">Success</Badge>
      <Badge theme="danger">Danger</Badge>
      <Badge theme="warning">Warning</Badge>
    </div>
  );
}

Outlined

PrimarySecondarySuccessDangerWarning

BadgeOutlined

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge variant="outlined" theme="primary">Primary</Badge>
      <Badge variant="outlined" theme="secondary">Secondary</Badge>
      <Badge variant="outlined" theme="success">Success</Badge>
      <Badge variant="outlined" theme="danger">Danger</Badge>
      <Badge variant="outlined" theme="warning">Warning</Badge>
    </div>
  );
}

Pill

Use shape="pill" for fully rounded badges.

PrimarySecondarySuccessDangerWarning

BadgePill

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return (
    <div className="flex flex-wrap gap-2">
      <Badge shape="pill" theme="primary">Primary</Badge>
      <Badge shape="pill" theme="secondary">Secondary</Badge>
      <Badge shape="pill" theme="success">Success</Badge>
      <Badge shape="pill" theme="danger">Danger</Badge>
      <Badge shape="pill" theme="warning">Warning</Badge>
    </div>
  );
}

Sizes

SmallMediumLarge

BadgeSizes

import { Badge } from '@/components/ui/badge';

export default function Component() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
    </div>
  );
}

Headings

Badges can be placed inside headings to provide additional context.

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New

Heading 6 New

BadgeHeadings

/* eslint-disable eslint-frontend-rules/enforce-typography-components */

import { Badge } from '@/components/ui/badge';

export function BadgeDefault() {
  return <Badge>Badge</Badge>;
}

export function BadgeVariants() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Badge variant='filled'>Filled</Badge>
      <Badge variant='outlined'>Outlined</Badge>
      <Badge variant='tonal'>Tonal</Badge>
    </div>
  );
}

export function BadgeThemes() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Badge theme='primary'>Primary</Badge>
      <Badge theme='secondary'>Secondary</Badge>
      <Badge theme='success'>Success</Badge>
      <Badge theme='danger'>Danger</Badge>
      <Badge theme='warning'>Warning</Badge>
      <Badge theme='info'>Info</Badge>
      <Badge theme='light'>Light</Badge>
      <Badge theme='dark'>Dark</Badge>
    </div>
  );
}

export function BadgeOutlined() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Badge variant='outlined' theme='primary'>
        Primary
      </Badge>
      <Badge variant='outlined' theme='secondary'>
        Secondary
      </Badge>
      <Badge variant='outlined' theme='success'>
        Success
      </Badge>
      <Badge variant='outlined' theme='danger'>
        Danger
      </Badge>
      <Badge variant='outlined' theme='warning'>
        Warning
      </Badge>
    </div>
  );
}

export function BadgePill() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Badge shape='pill' theme='primary'>
        Primary
      </Badge>
      <Badge shape='pill' theme='secondary'>
        Secondary
      </Badge>
      <Badge shape='pill' theme='success'>
        Success
      </Badge>
      <Badge shape='pill' theme='danger'>
        Danger
      </Badge>
      <Badge shape='pill' theme='warning'>
        Warning
      </Badge>
    </div>
  );
}

export function BadgeSizes() {
  return (
    <div className='flex flex-wrap items-center gap-2'>
      <Badge size='sm'>Small</Badge>
      <Badge size='md'>Medium</Badge>
      <Badge size='lg'>Large</Badge>
    </div>
  );
}

export function BadgeHeadings() {
  return (
    <div className='flex flex-col gap-3'>
      <h1 className='text-4xl font-bold'>
        Heading 1 <Badge>New</Badge>
      </h1>
      <h2 className='text-3xl font-bold'>
        Heading 2 <Badge>New</Badge>
      </h2>
      <h3 className='text-2xl font-bold'>
        Heading 3 <Badge>New</Badge>
      </h3>
      <h4 className='text-xl font-bold'>
        Heading 4 <Badge>New</Badge>
      </h4>
      <h5 className='text-lg font-bold'>
        Heading 5 <Badge>New</Badge>
      </h5>
      <h6 className='text-base font-bold'>
        Heading 6 <Badge>New</Badge>
      </h6>
    </div>
  );
}

API Reference

Badge

Prop	Type	Default	Description
`theme`	`primary \| secondary \| success \| danger \| warning \| info \| light \| dark`	`primary`	Color theme
`variant`	`filled \| outlined \| tonal`	`filled`	Visual style
`size`	`sm \| md \| lg`	`md`	Badge size
`shape`	`default \| pill`	`default`	Border radius style

Badge

Heading 1 New

Heading 2 New

Heading 3 New

Heading 4 New

Heading 5 New

Heading 6 New

On this page