Badge

Displays a badge or a component that looks like a badge, ready for CMS integration.

CMSPayload CMS Integration

Badges can be configured through CMS fields, allowing content editors to customize labels and variants without code changes.

CMS Demo

See how content editors configure badges in a CMS:

New

CMS FieldsEN

Label

Variant

This simulates how a content editor configures badges in Payload CMS. Switch locales to see localized labels.

CMS ConfigurationSimulates Payload CMS badge fields with localization

Payload Block Example

// In your Payload CMS block config
export const FeatureBlock = {
  slug: "feature-block",
  fields: [
    { name: "title", type: "text", localized: true },
    { name: "badgeLabel", type: "text", localized: true },
    {
      name: "badgeVariant",
      type: "select",
      options: [
        { label: "Default", value: "default" },
        { label: "Secondary", value: "secondary" },
        { label: "Destructive", value: "destructive" },
        { label: "Outline", value: "outline" },
      ],
    },
  ],
}

Rendering the Block

import { Badge } from "@mordecai-design-system/ui"

export function FeatureBlock({ data }) {
  return (
    <div>
      <Badge variant={data.badgeVariant}>
        {data.badgeLabel}
      </Badge>
      <h3>{data.title}</h3>
    </div>
  )
}

Basic Usage

BadgeLoading...

BadgeA default badge

Installation

pnpm add @corew500/ui

Usage

import { Badge } from "@mordecai-design-system/ui"

<Badge variant="default">Badge</Badge>

Variants

Four visual variants for different statuses and contexts.

DefaultSecondaryDestructiveOutline

With Icons

import { Check } from "lucide-react"

<Badge className="bg-green-500 text-white">
  <Check className="mr-1 h-3 w-3" />
  Verified
</Badge>

As Link

Use badgeVariants to style other elements like links:

import Link from "next/link"
import { badgeVariants } from "@mordecai-design-system/ui"

<Link href="/changelog" className={badgeVariants({ variant: "outline" })}>
  What's New
</Link>

Notification Counts

Use custom classes for compact count badges:

<Badge className="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">
  99+
</Badge>

Props

Prop	Type	Default	Description
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`variant`	enum	`default`	—
`animated`	enum	`false`	—