Version 0.13.2

Badge

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

Banana

Usage#

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

<Badge>Badge</Badge>

API reference#

Badge#

PropTypeDefaultDescription
icon
ReactNode
-Icon displayed before the badge text.
size
smallmedium
smallVisual 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#