Badge

Overview

Badges are labels that indicate the status of an object on the page.

When to use:

  • Use Badges to indicate the connection status of a 3rd party integration (e.g. payment method, a channel connection).
  • You can also use Badges to call attention to new features (e.g. “new”) or recommended integrations.

Implementation

Edit the code below to see your changes live!

<Badge label="active" variant="success" />

Props

Prop name
Type
Default
Description
label *string

The text applied to the component.

variantdanger | secondary | success | warning | primarysecondary

Determines which badge to display.

Props ending with * are required

Inherited

Expand

Margin Props

Do's and Don'ts

Do
Use the right colour for the right situation (e.g. red when something is broken / wrong).
Don't
Don’t apply multiple Badges to the same object.