Badge

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

UsageCodeAccessibility
99+StudentEnglish teacher
  <sl-badge>99+</sl-badge>
  <sl-badge size="sm" variant="danger"></sl-badge>
  <sl-badge size="3xl" variant="info"><sl-icon name="face-smile"></sl-icon>Student</sl-badge>
  <sl-badge size="2xl" 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.

Anatomy

ItemNameDescriptionOptional
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

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.

ItemOptionsDescription
Sizesm md lg xl 2xl 3xlDescription
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