> 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.