Badge

Badge

A small visual indicator for highlighting status, categories, or labels.

Storybook

Radix UI Docs

Source

DefaultPrimarySuccessErrorWarningInfo

Automatic Installation

This method is still working on progress, please use manual installation for now.

Manual Installation

Install dependencies

npm install radix-ui

Copy the code

components/badge/badge.tsx

import { Slot } from 'radix-ui'
import * as React from 'react'
import { type BadgeStyles, badgeStyles } from './badge.css'
 
interface BadgeProps extends React.ComponentPropsWithoutRef<'span'>, BadgeStyles {
  asChild?: boolean
}
 
const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
  ({ className, variant, asChild = false, ...props }: BadgeProps, forwardedRef) => {
    const Comp = asChild ? Slot.Root : 'span'
    return <Comp ref={forwardedRef} className={badgeStyles({ variant, className })} {...props} />
  }
)
 
Badge.displayName = 'Badge'
 
export { Badge, type BadgeProps }

Usage

Imports

import { Badge } from '#/components/badge'

Example

Browse the Storybook for more examples.

Edit on GitHub

Last updated on 3/24/2025