Badge

Installation

npm install class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

lib/utils.ts
components/badge/badge.tsx
components/badge/index.ts

Code

'use client';

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

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

Props

Badge

Badge props
Prop	Type	Default	Description
`fill`	`"outline" \| "light" \| "solid" \| null`	`"solid"`	No description
`isCaps`	`boolean`	`true`	When true, uses uppercase text with wider letter-spacing.
`isNumber`	`boolean`	`false`	When true, renders as a circular number badge. Pass the number as children. A bare count is ambiguous to assistive tech — pass an `aria-label` for context (e.g. `aria-label="8 unread"`).
`leftIcon`	`ReactNode`	No default documented	Icon to display before the label. Icon is automatically sized to 14px (3.5 spacing units). If the badge has no renderable children, this renders as an icon-only badge — blank strings, `false` / `null`, and empty fragments count as none. Ignored when `isNumber` is true.
`rightIcon`	`ReactNode`	No default documented	Icon to display after the label. Icon is automatically sized to 14px (3.5 spacing units). If the badge has no renderable children and no `leftIcon`, this renders as an icon-only badge — blank strings, `false` / `null`, and empty fragments count as none. Ignored when `isNumber` is true.
`variant`	`"default" \| "error" \| "secondary" \| "success" \| "information" \| "warning" \| null`	`"default"`	No description

Examples

Variants

DefaultSecondarySuccessWarningErrorInformation

'use client';

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

export default function BadgeVariants() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="error">Error</Badge>
      <Badge variant="information">Information</Badge>
    </div>
  );
}

Fills

defaultsecondarysuccesswarningerrorinformation

'use client';

import { Badge, type BadgeProps } from '@/components/badge/badge';

const variants = [
  'default',
  'secondary',
  'success',
  'warning',
  'error',
  'information',
] as const satisfies NonNullable<BadgeProps['variant']>[];

const fills = ['solid', 'light', 'outline'] as const satisfies NonNullable<
  BadgeProps['fill']
>[];

export default function BadgeFills() {
  return (
    <div className="nx:flex nx:flex-col nx:gap-3">
      {fills.map((fill) => (
        <div
          key={fill}
          className="nx:flex nx:flex-wrap nx:items-center nx:gap-2"
        >
          {variants.map((variant) => (
            <Badge key={variant} variant={variant} fill={fill}>
              {variant}
            </Badge>
          ))}
        </div>
      ))}
    </div>
  );
}

With icon

VerifiedPendingTrending

This example also needs:

npm install @tabler/icons-react@^3.36.1

'use client';

import {
  IconAlertTriangle,
  IconArrowUpRight,
  IconCircleCheck,
} from '@tabler/icons-react';

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

export default function BadgeWithIcon() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Badge variant="success" fill="light" leftIcon={<IconCircleCheck />}>
        Verified
      </Badge>
      <Badge variant="warning" fill="light" leftIcon={<IconAlertTriangle />}>
        Pending
      </Badge>
      <Badge variant="information" rightIcon={<IconArrowUpRight />}>
        Trending
      </Badge>
    </div>
  );
}

Icon only

This example also needs:

npm install @tabler/icons-react@^3.36.1

'use client';

import {
  IconAlertTriangle,
  IconCircleCheck,
  IconCircleX,
} from '@tabler/icons-react';

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

export default function BadgeIconOnly() {
  return (
    <div className="nx:flex nx:flex-wrap nx:items-center nx:gap-2">
      <Badge
        variant="success"
        leftIcon={<IconCircleCheck />}
        aria-label="Verified"
        title="Verified"
      />
      <Badge
        variant="warning"
        leftIcon={<IconAlertTriangle />}
        aria-label="Pending review"
        title="Pending review"
      />
      <Badge
        variant="error"
        leftIcon={<IconCircleX />}
        aria-label="Failed"
        title="Failed"
      />
    </div>
  );
}