Badge component

Figma Component
Badge component is a visual label used to indicate status or highlight featured content.
Unresolved

Properties

NameDescriptionDefault
contained
Display type of the badge. Default is true.
-
ghost
Should the badge have a ghost style on default state
-
icon

Icon appended before Badge content.

-
iconAfter
Icon appended after Badge content. Only visible when forwardedAs is set.
-
iconColor
Custom color of the icon
-
iconVisible
Should the appended icon be visible at all times
-
size

Badge size

-
truncate

Should the badge truncate text to fit the parent container width. Note: The Badge element will be displayed as a flex container, not inline flex, to allow truncation. @see {@link https://sema4ai-design-system.pages.dev/data-display/badge#truncate}

-
variant

Badge color style type, defaults to brand-primary

-
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.

Variants

Badge is available in two subsets of semantically and color named variants with overlapping visual style.

Semantic Variants

danger
info
success
warning
primary
secondary

Color Variants

brand-secondary
red
green
yellow
brand-primary
magenta
blue
orange
teal

Size

Badge component is available in medium and small sizes. The default size is `medium`.

Contained

Contained property of Badge component defines the background color behavior of the badge.

Interactive

Badge can be used as an interactive element by defining the `forwardedAs` property

As anchor

With Icon

An icon can be prepended or appended to the badge content. If required, a custom color can be defined via the `iconColor` prop.

Truncate

The `truncate` property can be used to truncate the Badge label to fit the parent container width.

Badge label that is very long