Badge

A non-interactive label for annotating, categorizing, or highlighting content.

Banana

Usage#

import { Badge } from '@backstage/ui';

<Badge>Badge</Badge>

API reference#

Badge#

Prop	Type	Default	Description
icon	ReactNode	-	Icon displayed before the badge text.
size	smallmedium	small	Visual size of the badge. Use small for inline or dense layouts, medium for standalone badges.
children	ReactNode	-
className	string	-	Additional CSS class name for custom styling.

Examples#

With icons#

Banana

<Badge icon={<RiBugLine />}>Banana</Badge>

Sizes#

BananaBanana

<Flex direction="row" gap="2">
  <Badge size="small">Banana</Badge>
  <Badge size="medium">Banana</Badge>
</Flex>

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-Badge
bui-BadgeIcon

Changelog#

Version 0.14.0#

Changes

Added new Badge component for non-interactive labeling and categorization of content. It shares the visual appearance of Tag but renders as a plain DOM element with no interactive states. #33744