# Badge

{% hint style="warning" %}
The Badge component is designed to display a single item or piece of information. If you need to display multiple items as badges, consider using the [**Chip Container**](https://docs.avonnicomponents.com/dynamic-components/components/chip-container) component instead.
{% endhint %}

## Overview

The Avonni Badge component adds colorful, eye-catching labels to highlight information in your Salesforce Dynamic Components. It's designed for single items—use the Chip Container for multiple badges.

Key features include:

* **Concise Labels:** Display short text, numbers, or phrases.
* **Style Variants:** Color-coded options for different connotations (e.g., success, warning).
* **Optional Avatar:** Add icons, images, or initials for context.
* **Attention-Grabbing:** Enhances UI clarity and visual appeal.

*Tip:* Pair with lists or cards to tag items dynamically.

### Use Cases

* **New Item Indicators:** Flag new products, features, or content (e.g., "New").
* **Notification Counts:** Show unread messages or alerts (e.g., "5+").
* **Product Labels:** Categorize items like "Sale," "Bestseller," or "New Arrival."
* **User Status:** Display roles or states (e.g., "Online," "Admin").
* **Status Markers:** Indicate process stages (e.g., "Approved," "Pending").

***

## Configuration

Select the Badge on the canvas to access properties in the right-hand Properties Panel.

### **Basic Properties**

These handle core text and identification.

| Property | Type         | Description                                                                  | Example                          |
| -------- | ------------ | ---------------------------------------------------------------------------- | -------------------------------- |
| API Name | Text         | Unique identifier for the instance (assumed standard for Avonni components). | StatusBadge                      |
| Label    | Text/Binding | Text inside the badge; keep concise—bind for dynamics.                       | "Urgent" or {!notificationCount} |

*Best Practice:* Use clear, short labels; bind to Variables for real-time updates (e.g., counts from queries).

### **Appearance & Variant**

These control the visual style.

| Property | Type   | Description                                                                        | Options/Examples                                                            |
| -------- | ------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
| Variant  | Select | Style and color: Align with intent (e.g., success for positive, error for issues). | success (green), warning (yellow), error (red), info (blue/gray), and more. |

*Tip:* Preview variants in the properties panel to match your theme.

### **Avatar (Optional)**

Add a visual element for context.

| Property | Type             | Description                                        | Options/Examples                                                           |
| -------- | ---------------- | -------------------------------------------------- | -------------------------------------------------------------------------- |
| Source   | Text/URL/Binding | Image URL, initials, or icon name; prioritize one. | URL: "<https://example.com/pic.jpg>", Initials: "JD", Icon: standard:user. |
| Size     | Select           | Avatar dimensions.                                 | x-small, small, medium.                                                    |
| Shape    | Select           | Form: circle or square.                            | circle.                                                                    |

{% hint style="info" %}

## Best Practice

Use avatars when linking to users/objects; select icon as fallback for no image/initials. Adjust avatar styling or look and feel by configuring properties in the [Style Panel](https://docs.avonnicomponents.com/dynamic-components/component-builder/configuring-components/style) (e.g., borders, shadows, colors).

<img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FmhVPL1XUq7G48FB7Gz3c%2F2025-07-14_09-21-48.png?alt=media&#x26;token=9b935c03-f2f5-494c-bf14-0b4f4348cfa2" alt="" data-size="original">
{% endhint %}

## Examples

### **Example 1: Simple Status Badge**

1. **Configure Properties:**
   * Label: "Approved"
   * Variant: success

**Result:** A green badge highlighting positive status, e.g., on a record.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FCWl7pcWHPf9Dx9w1bIpD%2F2025-07-14_09-19-21.png?alt=media&#x26;token=8350437f-3108-49f2-a5ee-7b1721c539e6" alt=""><figcaption></figcaption></figure>

### **Example 2: Notification Count with Avatar**

1. **Create Variable:** Add a Number Variable unreadCount.
2. **Configure Properties:**
   * Label: {!unreadCount}
   * Variant: warning
   * Avatar Source: Icon standard:scan\_card (or bind image URL)
   * Avatar Size: small
   * Avatar Shape: circle

**Result:** Dynamic yellow badge showing counts with icon, updating via variable.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FH8xHXsigyhgsDvZFblJc%2F2025-07-14_09-25-35.png?alt=media&#x26;token=df5a932c-943b-448c-a809-62e199b6bfb0" alt=""><figcaption></figcaption></figure>

### **Example 3: User Role Badge**

1. **Configure Properties:**
   * Label: "Admin"
   * Variant: info
   * Avatar Source: Initials "AD"
   * Avatar Shape: square

**Result:** Blue badge with initials for role indication in profiles.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F5FeNex7Ghb8XprLBmtCC%2F2025-07-14_09-31-07.png?alt=media&#x26;token=c5d6fbd9-fba6-4db9-b581-c5c39731753a" alt=""><figcaption></figcaption></figure>

***

## Why Use the Badge Component?

* **Highlight Key Info:** Draw eyes to updates or details.
* **Categorize Visually:** Group items by attributes or status.
* **Show Status:** Convey progress/states clearly (e.g., "Complete").
* **Boost UI Appeal:** Add color and clarity for better engagement.

***

## Key Considerations

* **Single vs. Multiple:** Stick to one item per Badge; use [Chip Container](https://docs.avonnicomponents.com/dynamic-components/components/chip-container) for lists.
* **Label Best Practices:** Keep short, clear, and purposeful to avoid confusion.
* **Variant Selection:** Match colors to semantics (e.g., red for errors) for intuitive UX.
* **Avatar Usage:** Add only when relevant; ensure sources are accessible (e.g., valid URLs).
* **Dynamic Binding:** Bind Label/Avatar for context-aware badges (e.g., from records).
* **Accessibility:** Use contrasting colors; provide alt text for avatars if possible.

***

## **Troubleshooting Common Issues**

* **Badge Not Visible:** Check Variant for hidden styles; ensure Label isn't empty.
* **Avatar Not Loading:** Verify source (URL/icon name); test bindings with static values.
* **Overly Long Label:** Trim text—badges truncate; use ellipses if needed via custom styling.
* **Color Clashes:** Preview in different themes; adjust Variant for readability.
* **No Dynamics:** Confirm bindings to Variables/Formulas; [debug in preview mode](https://docs.avonnicomponents.com/dynamic-components/component-builder/advanced-features/debug-panel).

***

## Summary

The Avonni Badge component creates vibrant labels to emphasize info and enhance UIs in Salesforce. With variants and avatars, it's versatile for status, notifications, and more. For related components, see Avonni Chip Container or the Icons Guide.