The Badge component helps to label text.

Update your pronouns in your profile settings New

Props

Component props
Name
Type
Default
text
Required
string
-

Text displayed inside of the Badge. Sentence case is best.

position
"middle" | "top"
"middle"

Badge position relative to its parent element.

Usage guidelines

When to Use
  • Labeling and bringing awareness to a specific element or feature (e.g., something is new or required).
When Not to Use
  • Providing feedback at the element level (e.g., displaying error messages). Use inline text instead.
  • Requiring interaction from users since Badges are always static and non-interactive.

Example

The Badge component is rendered inline within parent element.

Some text that uses Badge component as its child New

Example: positioning

Larger text example rendered with a top positioned Badge.

Heading Beta

Example: within other components

Components like Module and Dropdown support Badges within the component.

Title
Try it out!
This is example content.