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!

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.