Badge

avonni-badge

A label that holds a small amount of information, such as a count or status, and can include an icon.

Overview

Badge is a Lightning Web Component that displays a compact visual indicator used to highlight status, categories, or metadata.

Use it in your own Lightning Web Components to label records, flag states, or surface counts. You control the label, the styling variant, an optional outline, and left/right slots for icons or other content.

Use Cases

• Status labels: Mark a record as Active, Pending, or Closed.
• Category tags: Highlight a record's type or segment.
• Counts and metadata: Show a small count or attribute next to a title.
• Connectivity state: Use the offline variant to indicate sync status.
• Inline icons: Pair the label with an SLDS icon via the slots.

---

Variant Guidelines

Variant	Use Case
base	Neutral metadata or counts.
success	Positive/active states.
warning	Cautionary states (e.g. expiring soon).
error	Blocking or failed states.
info	Informational tags.
offline	Connectivity or sync status.

---

Use Case Examples

Example 1: Status label

Scenario: Show an "Active" status badge next to a record name.

<!-- statusLabel.html -->
<template>
    <avonni-badge label="Active" variant="success"></avonni-badge>
</template>

Result: A green success badge reading "Active".

Example 2: Badge with leading and trailing icons

Scenario: Reinforce the label with an icon on each side.

<!-- iconBadge.html -->
<template>
    <avonni-badge label="Approved" variant="success" outline>
        <lightning-icon
            slot="left"
            icon-name="utility:success"
            size="xx-small"
            variant="inverse"
        ></lightning-icon>
        <lightning-icon
            slot="right"
            icon-name="utility:chevronright"
            size="xx-small"
            variant="inverse"
        ></lightning-icon>
    </avonni-badge>
</template>

Result: An outlined success badge with a leading success icon and a trailing chevron.

---

Specifications

Attributes

Name	Description	Type	Default	Required
label	Label displayed in the chip.	String	—
outline	If true, display an outline style button.	Boolean	false
variant	The variant changes the appearance of the chip. Accepted variants include base, brand, inverse, alt-inverse, success, info, warning, error, offline.	String	"base"

Slots

Slot	Description
left	Left slot. Placeholder for your left content.
right	Right slot. Placeholder for your right content.

Styling Hooks

CSS Variable	Type	Default
--avonni-chip-alt-inverse-color-background	color	#032d60
--avonni-chip-alt-inverse-color-border	color	transparent
--avonni-chip-alt-inverse-text-color	color	#ffffff
--avonni-chip-alt-inverse-outline-color	color	#032d60
--avonni-chip-base-color-background	color	#032d60
--avonni-chip-base-color-border	color	transparent
--avonni-chip-base-text-color	color	#080707
--avonni-chip-base-outline-color	color	#032d60
--avonni-chip-brand-color-background	color	#0176d3
--avonni-chip-brand-color-border	color	transparent
--avonni-chip-brand-text-color	color	#ffffff
--avonni-chip-brand-outline-color	color	#0176d3
--avonni-chip-error-color-background	color	#ba0517
--avonni-chip-error-color-border	color	transparent
--avonni-chip-error-text-color	color	#ffffff
--avonni-chip-error-outline-color	color	#ba0517
--avonni-chip-info-color-background	color	#706e6b
--avonni-chip-info-color-border	color	transparent
--avonni-chip-info-text-color	color	#ffffff
--avonni-chip-info-outline-color	color	#706e6b
--avonni-chip-inverse-color-background	color	#001639
--avonni-chip-inverse-color-border	color	transparent
--avonni-chip-inverse-text-color	color	#ffffff
--avonni-chip-inverse-outline-color	color	#001639
--avonni-chip-offline-color-background	color	#444444
--avonni-chip-offline-color-border	color	transparent
--avonni-chip-offline-text-color	color	#ffffff
--avonni-chip-offline-outline-color	color	#444444
--avonni-chip-success-color-background	color	#2e844a
--avonni-chip-success-color-border	color	transparent
--avonni-chip-success-text-color	color	#ffffff
--avonni-chip-success-outline-color	color	#2e844a
--avonni-chip-warning-color-background	color	#dd7a01
--avonni-chip-warning-color-border	color	transparent
--avonni-chip-warning-text-color	color	#080707
--avonni-chip-warning-outline-color	color	#dd7a01
--avonni-chip-label-font-size	font	0.75rem
--avonni-chip-label-font-style	font	normal
--avonni-chip-label-font-weight	font	700
--avonni-chip-radius-border	dimension	15rem
--avonni-chip-sizing-border	sizing	1px
--avonni-chip-styling-border	styling	solid
--avonni-chip-line-height	dimension	normal
--avonni-chip-spacing-block-start	dimension	0.25rem
--avonni-chip-spacing-block-end	dimension	0.25rem
--avonni-chip-spacing-inline-start	dimension	0.5rem
--avonni-chip-spacing-inline-end	dimension	0.5rem
--avonni-chip-avatar-icon-color-foreground	color	#ffffff
--avonni-chip-avatar-icon-color-foreground-default	color	#ffffff

Key Considerations

• Variant selection: Choose the variant by meaning, not just color.
• Slots: The left and right slots accept any markup, commonly lightning-icon.
• Outline: Use outline for a lighter visual weight on dense layouts.
• Conciseness: Keep labels short—badges are meant to be glanceable.
• Best Practice: Match the variant to the meaning of the label (e.g. success for active, error for blocked) so color reinforces the status.

---

Troubleshooting Common Issues

• Badge not visible: Verify label is set (or slot content is provided).
• Wrong color: Confirm the variant value matches one of the accepted options; an unknown value falls back to base.
• Icon misaligned: Use a small icon size (e.g. xx-small) in the slots.
• If issues persist: Contact our support team at [email protected] for assistance.