Badge

tile/badge

Presents a small inline indicator for categorization or status.

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.

To create a badge, provide a short label. A label without a variant displays the badge in the default style.

1{
2    "definition": "tile/badge",
3    "attributes": {
4        "label": "Basic",
5        "variant": "success"
6    }
7}

To present the badge with a different style, use the variant attribute. For example, use "variant": "success" to convey a positive status.

1{
2    "definition": "tile/badge",
3    "attributes": {
4        "label": "Active",
5        "variant": "success"
6    }
7}

To annotate a name or title with a status label, place tile/badge inline with tile/text in a tile/row.

1{
2    "definition": "tile/row",
3    "attributes": { "align": "center", "gap": "sm" },
4    "children": [
5        {
6            "definition": "tile/text",
7            "attributes": { "text": "Acme Corp" }
8        },
9        {
10            "definition": "tile/badge",
11            "attributes": { "label": "New", "variant": "primary" }
12        }
13    ]
14}

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/text for 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.

• HXL Lightning Types Reference
• HXL Playground: Badge