Badge

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

Usage

Code

Accessibility

99+

Student

English teacher

  <sl-badge emphasis="bold" size="sm" variant="danger"></sl-badge>
  <sl-badge><sl-icon name="check"></sl-icon></sl-badge>
  <sl-badge>99+</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>

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.

Anatomy

Item	Name	Description	Optional
1	Container	The badge container	no
2	Icon	Icon that can be positioned before the label.	yes
3	Label	The label is the text attributed to the badge that provides context.	yes

Emphasis

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

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.

Bold

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.

Item	Options	Description
Size	`sm` `md` `lg`	Indicates the size of the badge
Emphasis	`subtle` `bold`	Indicates the emphasis the badge should have, with subtle being the default.
Variant	`primary` `accent` `neutral` `success` `info` `warning` `danger`	The badge offers seven distinct intents, each conveying a unique tone to the user.
Show label	`boolean`	The option to turn the label on or off
Label	`option`	Displays the text of the label
Show icon	`boolean`	The option to turn the icon on or off
Icon type	`fa` `svg`	Choose between a FontAwesome icon or a custom SVG.
FontAwesome	`value`	To insert the name of the icon.
SVG Instance	`instance`	To select the instance of the SVG.

Interactive example