Introduction

The Badge component is a small, versatile visual element used to label, categorize, or highlight content metadata. It is commonly utilised to display statuses (such as "Success" or "Pending"), tags, or numerical counters.

Through the Page Builder CMS, content authors can quickly configure badge variants, sizes, and color palettes to perfectly fit their layout guidelines.

Usage

You can customize the appearance of badges using visual styles, custom colors, and responsive sizes.

Style Variants

The component supports multiple visual display styles to help establish visual hierarchy.

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

Color Palettes

Choose from a wide array of theme accent colors to indicate semantic meanings.

{
  "type": "badge",
  "text": "Error Detected",
  "variant": "solid",
  "colorPalette": "red"
}

Size Options

Scale your badges from compact metadata pills to larger callout tags.

{
  "type": "badge",
  "text": "Large Label",
  "size": "lg",
  "colorPalette": "blue",
  "variant": "subtle"
}

Props

The following configuration parameters are available when adding a badge block inside the Page Builder schema (content/pages/*.json).