> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/lwc-components/core-components/badge.md).

# 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.

```html
<!-- 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.

```html
<!-- 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 <support@avonni.app> for assistance.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/lwc-components/core-components/badge.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.