Introduction

A small visual element that labels or categorizes content.

Usage

import { Badge } from "../components/ui";

export default function MyPage() {
  return (
    <Badge colorPalette="blue" variant="solid">
      New
    </Badge>
  );
}

CMS Page Builder

This component is available as a badge block in the Page Builder (content/pages/*.json):

{
  "type": "badge",
  "text": "New",
  "colorPalette": "blue",
  "variant": "solid"
}

Props

| variant | `"solid" \ | "subtle" \ | "surface" \ | "outline"` | The visual style. |

| size | `"sm" \ | "md" \ | "lg" \ | "xl" \ | "2xl"` | The size of the badge. |

| interactive | boolean | Whether to enable client-side hydration. |