Badge

Use Badge to label a status or a short piece of metadata. Choose a semantic variant when the label communicates an outcome such as success, warning, or failure.

Preview

Usage

import { Badge } from '@branditdev/ui';

export function BadgeDemo() {
  return (
    <div className='flex flex-wrap gap-2'>
      <Badge>Published</Badge>
      <Badge variant='secondary'>Draft</Badge>
      <Badge variant='outline'>Not run</Badge>
      <Badge variant='success'>Passed</Badge>
      <Badge variant='warning'>Needs review</Badge>
      <Badge variant='destructive'>Failed</Badge>
    </div>
  );
}

API

Badge(props): Element

Defined in: components/badge/badge.tsx:35

Compact status or metadata label.

Parameters

Returns

Element

A themed badge element.

Source

import { cva, type VariantProps } from 'class-variance-authority';
import type { ComponentProps } from 'react';

import { cn } from '@branditdev/ui';

const badgeVariants = cva(
  'inline-flex w-fit shrink-0 items-center gap-1 rounded-md border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap',
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground',
        secondary: 'bg-secondary text-secondary-foreground',
        outline: 'border-border text-foreground',
        destructive: 'bg-destructive text-destructive-foreground',
        success: 'bg-success text-success-foreground',
        warning: 'bg-warning text-warning-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

export type BadgeProps = ComponentProps<'span'> &
  VariantProps<typeof badgeVariants>;

export function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <span
      data-slot='badge'
      data-variant={variant}
      className={cn(badgeVariants({ variant, className }))}
      {...props}
    />
  );
}

export { badgeVariants };