A badge is a non-interactive visual indicator used to communicate status.

99+StudentEnglish teacher
  <sl-badge emphasis="bold" size="sm" variant="danger"></sl-badge>
  <sl-badge><sl-icon name="check"></sl-icon></sl-badge>
  <sl-badge size="lg" variant="info"><sl-icon name="face-smile"></sl-icon>Student</sl-badge>
  <sl-badge size="lg" variant="success">English teacher</sl-badge>

When to use

Use Badges to Draw Attention

Badges are an effective way to highlight new notifications, important content, or status changes that may be of particular interest to users. By adding badges, you can instantly grab attention and encourage users to explore further.

When not to use

Don't use badges as a interactive status indicators

Badges serve as visual cues to convey information without requiring user interaction.

Don't use the small size

The small size of the badge is only meant to be used in combination with the avatar component. Do not use it for other purposes.


1ContainerThe badge containerno
2IconIcon that can be positioned before the label.yes
3LabelThe label is the text attributed to the badge that provides context.yes


Understanding when to use subtle and bold emphasis for badge components is crucial for effective user interface design. Badges serve as visual cues to convey various types of information, ranging from minor details to critical alerts.


Subtle (default)

Use subtle emphasis when the information conveyed by the badge is important but not critical. This could include supplementary details, status indicators, or minor distinctions.



Reserve bold emphasis for situations where the information conveyed by the badge is crucial or demands immediate attention. This could include urgent notifications, critical alerts, or high-priority indicators.

Figma Options

With these options, you can tweak the appearance of the badge in Figma. They are available in the Design Panel so you can compose the badge to exactly fit the user experience need for the use case you are working on.

Sizesm md lgIndicates the size of the badge
Emphasissubtle boldIndicates the emphasis the badge should have, with subtle being the default.
Variantprimary accent neutral success info warning dangerThe badge offers seven distinct intents, each conveying a unique tone to the user.
Show labelbooleanThe option to turn the label on or off
LabeloptionDisplays the text of the label
Show iconbooleanThe option to turn the icon on or off
Icon typefa svgChoose between a FontAwesome icon or a custom SVG.
FontAwesomevalueTo insert the name of the icon.
SVG InstanceinstanceTo select the instance of the SVG.
Interactive example