OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Badge

Displays a stylized badge element.

Badge

 <Badge>Badge</Badge>

API Reference

Prop	Type	Default
`color`	`"gray" \| "purple" \| "blue" \| "green" \| "yellow" \| "red"`	`"gray"`
`highContrast`	`boolean`	`–`
`size`	`"1" \| "2"`	`"1"`

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

Use the color prop to control the color of the badge.

GrayPurpleBlueGreenYellowRed

 <Flex align="center" gap="2">
  <Badge color="gray">Gray</Badge>
  <Badge color="purple">Purple</Badge>
  <Badge color="blue">Blue</Badge>
  <Badge color="green">Green</Badge>
  <Badge color="yellow">Yellow</Badge>
  <Badge color="red">Red</Badge>
</Flex>

High contrast

Use the highContrast prop to control whether a higher contrast color combination is used.

GrayGray

 <Flex align="center" gap="2">
  <Badge highContrast={true}>Gray</Badge>
  <Badge highContrast={false}>Gray</Badge>
</Flex>

Sizes

Use the size prop to control the size of the badge.

Size 1Size 2Size 2

 <Flex align="center" gap="2">
  <Badge size="1">Size 1</Badge>
  <Badge size="2">Size 2</Badge>
  <Badge size="3">Size 2</Badge>
</Flex>

With Code component

You can compose Badge together with the Code component.

HTTP

 <Badge>
  <Code variant="ghost">HTTP</Code>
</Badge>

Use the following Badge colors and Code component to represent HTTP response codes:

200401500

 <Flex align="center" gap="2">
  <Badge color="green">
    <Code variant="ghost">200</Code>
  </Badge>

  <Badge color="yellow">
    <Code variant="ghost">401</Code>
  </Badge>

  <Badge color="red">
    <Code variant="ghost">500</Code>
  </Badge>
</Flex>

Use the following Badge colors and Code component to represent HTTP request methods:

GETPOSTPUTDELETE

 <Flex align="center" gap="2">
  <Badge color="blue">
    <Code variant="ghost">GET</Code>
  </Badge>

  <Badge color="green">
    <Code variant="ghost">POST</Code>
  </Badge>

  <Badge color="yellow">
    <Code variant="ghost">PUT</Code>
  </Badge>

  <Badge color="red">
    <Code variant="ghost">DELETE</Code>
  </Badge>
</Flex>