Design System
v4.9.5
⌘K

Badge

Jump to Props

Indicate a running tally

On this page

Installation

import { Badge } from "@vitality-ds/components";

Usage

Badges contain numeric values and indicate a running tally, such as the number of outstanding diagnostic requests.

Aim For
  • Use badges in conjunction with a single item so that there is no ambiguity around which item is indicated.
  • Sometimes it's helpful to use tooltips to enhance user understanding – to indicate units, for example.
  • Badges are for counts, so they should only contain numbers.
Avoid
  • Do not display status information – use a `StatusBadge` for that

Content

A badge's content should only contain numbers.

<Badge content={23} />

Color Variants

This component offers a limited set of color variants – their use cases align to the core use cases of accent and neutral colors. When choosing which color to use, follow those guidelines.

To set the color, use the color prop.

<Stack spacing="lg">
  <Badge content={2} color="accent">
    <AdminNote />
  </Badge>
  <Badge content={20} color="accent">
    <AdminNote />
  </Badge>
  <Badge content={200} color="neutral">
    <AdminNote />
  </Badge>
</Stack>

Position

The position of the badge can be either "inline" (ie. it sits before/after its surrounding elements) or placed closely around an edge of another element. In this case, you set that element as a child to the badge and set the badge's position prop to either topLeft, topRight (default), bottomLeft, or bottomRight

<Stack spacing="lg">
  <Badge content={123} color="accent" position="topLeft">
    <AdminNote />
  </Badge>
  <Badge content={123} color="accent" position="topRight">
    <AdminNote />
  </Badge>
  <Badge content={123} color="accent" position="bottomLeft">
    <AdminNote />
  </Badge>
  <Badge content={123} color="neutral" position="bottomRight">
    <AdminNote />
  </Badge>
  <Stack direction="horizontal">
    <AdminNote />
    <Badge content={3} color="neutral" />
  </Stack>
</Stack>

Dot variant

This can be used as a notification that something has changed without giving a count. Setting the variant to dot causes the Badge component to ignore the content and simply display a "dot".

<Stack spacing="lg">
  <Badge variant="dot" color="accent" position="topRight">
    <AdminNote />
  </Badge>
  <Badge variant="dot" color="accent" position="topLeft">
    <AdminNote />
  </Badge>
  <Badge variant="dot" color="accent" position="bottomRight">
    <AdminNote />
  </Badge>
  <Badge variant="dot" color="accent" position="bottomLeft">
    <AdminNote />
  </Badge>
  <Stack direction="horizontal">
    <AdminNote />
    <Badge variant="dot" color="accent" />
  </Stack>
</Stack>

Figma Library

Figma.logo

Props

color

Type

"neutral" | "accent"

Default Value

accent

content

Description

The numeric value to display inside the badge.

Type

string | number

inline

Type

boolean

position

Type

"topLeft" | "topRight" | "bottomLeft" | "bottomRight"

Default Value

topRight

ref

Type

Ref<HTMLDivElement>

variant

Type

"dot"

© 2025