Badge

Used to highlight an item's status for quick recognition.

DefaultSuccessRemovedNew

import { Badge, Stack } from "chakra-ui-solid";

export default function BadgeBasic() {
  return (
    <Stack direction="row">
      <Badge>Default</Badge>
      <Badge colorPalette="green">Success</Badge>
      <Badge colorPalette="red">Removed</Badge>
      <Badge colorPalette="purple">New</Badge>
    </Stack>
  );
}

Usage

import { Badge } from "chakra-ui-solid";

<Badge>Badge</Badge>

Examples

Icon

Render an icon within the badge directly.

NewNew

import { Badge, Stack } from "chakra-ui-solid";
import { AtSignIcon, StarIcon } from "../components/site/icons";

export default function BadgeWithIcon() {
  return (
    <Stack align="flex-start">
      <Badge variant="solid" colorPalette="blue">
        <StarIcon />
        New
      </Badge>
      <Badge variant="solid" colorPalette="green">
        New
        <AtSignIcon />
      </Badge>
    </Stack>
  );
}

The badge is an inline-flex row with a gap, so a glyph needs no wrapper — put it before or after the label and the row spaces itself.

Variants

Badges come in different variants.

OutlineSolidSubtleSurface

import { Badge, Stack } from "chakra-ui-solid";

export default function BadgeWithVariants() {
  return (
    <Stack direction="row">
      <Badge variant="outline">Outline</Badge>
      <Badge variant="solid">Solid</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="surface">Surface</Badge>
    </Stack>
  );
}

A fifth, plain, drops the box entirely and leaves the text in the palette’s foreground colour.

Sizes

Badges come in different sizes.

NewNewNewNew

import { Badge, HStack } from "chakra-ui-solid";

export default function BadgeWithSizes() {
  return (
    <HStack>
      <Badge size="xs">New</Badge>
      <Badge size="sm">New</Badge>
      <Badge size="md">New</Badge>
      <Badge size="lg">New</Badge>
    </HStack>
  );
}

Props

BadgeProps
Prop	Default	Type
`size`	`'sm'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg'>` The text style and horizontal padding together, with a matching minimum height.
`variant`	`'subtle'`	`ConditionalValue<'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'>` How much of the palette the badge spends — `solid` fills it, `subtle` and `surface` tint it, `outline` is a ring alone, and `plain` is the text with no box at all.

Plus everything it inherits — HTMLChakraProps<"span">, the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.

The badge names no colour of its own. Every variant resolves against colorPalette, which is an inherited style prop — so <Badge colorPalette="green"> and a colorPalette on any ancestor pick the palette, and the four variants decide how much of it the badge spends.