Badge

Displays a badge or a component that looks like a badge.

Badge

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

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

Install

npx shadcn@latest add @madeui/badge

Usage

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

<Badge variant="outline">Badge</Badge>

Variants

SecondaryOutlineDestructive

import * as stylex from '@stylexjs/stylex';

import { space } from '@/lib/constants.stylex';

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

export default function BadgeVariants() {
  return (
    <div {...stylex.props(styles.row)}>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="outline">Outline</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  );
}

const styles = stylex.create({
  row: {
    alignItems: 'center',
    display: 'flex',
    flexWrap: 'wrap',
    gap: space.s2,
  },
});

With icon

Verified

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

export default function BadgeIcon() {
  return (
    <Badge variant="secondary">
      <svg width="12" height="12" viewBox={`0 0 12 12`} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d={`M10.5 3 4.5 9 1.5 6`} />
      </svg>
      Verified
    </Badge>
  );
}

With spinner

Syncing

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

export default function BadgeSpinner() {
  return (
    <Badge variant="secondary">
      <Spinner width="12" height="12" />
      Syncing
    </Badge>
  );
}

Link

Pass a render element to render the badge as a different element, such as a link.

New release

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

export default function BadgeLink() {
  return (
    <Badge variant="secondary" render={<a href="#" />}>
      New release
    </Badge>
  );
}

API reference

Badge

Prop	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'`	`'primary'`	Visual style.
`render`	`ReactElement \| (props, state) => ReactElement`	—	Renders the badge as a different element (e.g. an `<a>`) while keeping the badge styling.
`style`	`StyleXStyles`	—	StyleX styles merged last — always win over the component’s own styles.