Badge
tile/badge
Presents a small inline indicator for categorization or status.
| Name | Required | Lightning Type | Default | Description |
|---|---|---|---|---|
| label | Yes | lightning__textType | Short text content for the badge. | |
| variant | No | lightning__textType | secondary | Visual style and status classification. |
Use a badge to display a short inline label for categorization or status. For semantic states such as a record’s health or pipeline stage, use a status variant such as success, warning, error, or info.
Avoid using a badge for interactive elements. To create a clickable label, use tile/button or tile/link instead.
To create a badge, provide a short label. A label without a variant displays the badge in the default style.
To present the badge with a different style, use the variant attribute. For example, use "variant": "success" to convey a positive status.
To annotate a name or title with a status label, place tile/badge inline with tile/text in a tile/row.
Use these variant values to express different badge states.
error: Indicates an urgent or critical status.info: Indicates informational status that’s useful for supplemental items.outline: Indicates a subtle status to describe items that are less prominent but helpful.primary: Indicates non-urgent information for general statuses that don’t require immediate attention.secondary(default): Indicates a neutral label without status emphasis, for general categorization and tags.success: Indicates a positive status to highlight successful actions or items.warning: Indicates a cautionary or advisory status to represent items that need action or review but aren’t critical.
Consider these guidelines when working with badges.
- Keep labels short. Use one or two words to convey the intent of the badge. Consider using
tile/textfor longer text. - Use status variants (
"success","warning","error","info") only when the label communicates a meaningful state, not for decorative color. - Use
"primary"for high-emphasis labels such as “New” or “Featured”; use"outline"for a subtle bordered appearance.
Note any limitations that apply to this component.
No known limitations for tile/badge in Slackbot.
No known limitations for tile/badge in ChatGPT.
Semantic variant colors rely on SLDS styling hooks. Without the styling hooks, badges fall back to the default gray styling.