Badge

The Badge component lets you add colorful, attention-grabbing labels to your user interface.

The Avonni Badge component is a compact visual indicator that highlights status, categories, or metadata with a short, color-coded label. Use it when you need to draw attention to a single piece of information; for multiple items, use the Chip Container component instead.

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 component instead.

Overview

The Avonni Badge component adds colorful, eye-catching labels to highlight information in your Salesforce Dynamic Components. It displays short text, numbers, or phrases, supports color-coded style variants for different connotations, and can include an optional avatar (icon, image, or initials) for added context.

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.

Common uses

• 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

To configure the Badge, select it on the canvas. The Edit Badge panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

Properties

Label

The Label is the text displayed inside the badge. Keep it short and purposeful. You can type a static value or bind the label to a variable, formula, or record field so it updates dynamically — for example, showing a live notification count or a record's status.

Outline

When Outline is enabled, the badge is rendered with an outline style rather than a solid fill. This is off by default.

Variant

The Variant sets the color and visual style of the badge so you can align it with its meaning. Choose the variant that matches the intent of the information being shown — for example, Success for a positive state or Error for a problem.

Available variants: Base (default), Alt-Inverse, Brand, Error, Info, Inverse, Offline, Success, and Warning.

Avatar

The Avatar section adds an optional visual element to the badge for extra context. It exposes the following settings:

• Variant: Sets the shape of the avatar — Circle or Square (default).
• Initials: Text initials to display when no image is provided.
• Icon Name: A Lightning Design System icon used as a fallback when no image or initials are available (e.g., standard:user).
• Image Source: The URL of an image to display. You can select an uploaded image or bind a URL.

Best Practice

Use avatars when linking to users or objects; an icon serves as a fallback when there is no image or set of initials. Adjust avatar styling and look and feel from the Style Panel (e.g., borders, shadows, colors).

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Use Cases

Example 1: Simple Status Badge

1. Configure the properties:

   • Label: "Approved"
   • Variant: Success

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

Example 2: Notification Count with Avatar

1. Create a Number variable, unreadCount.
2. Configure the properties:

   • Label: {!unreadCount}
   • Variant: Warning
   • Avatar Icon Name: standard:scan_card (or bind an image URL)
   • Avatar Variant: Circle

Result: A dynamic yellow badge showing the count with an icon, updating via the variable.

Example 3: User Role Badge

1. Configure the properties:

   • Label: "Admin"
   • Variant: Info
   • Avatar Initials: "AD"
   • Avatar Variant: Square

Result: A badge with initials for role indication in profiles.

Styling

The Style tab gives you fine-grained control over the Badge's appearance, overriding the default variant styles. Configure it from the Style tab of the Edit Badge panel. The available sections depend on the selected Variant.

Margin

Controls the outer spacing around the badge, creating space between it and other elements on the screen.

• Top / Right / Bottom / Left: Adjust the space on each side of the badge.

Padding

Controls the inner spacing between the badge's content and its border.

• Top / Right / Bottom / Left: Adjust the inner spacing on each side.

Border

Customizes the border surrounding the badge.

• Color: Set the border color.
• Size: Adjust the border thickness.
• Style: Choose a border style (e.g. solid, dashed, dotted).
• Radius: Control the roundness of the corners.

Horizontal Alignment

Controls how the badge is aligned horizontally within its container.

• Horizontal Alignment: Set the badge's horizontal position.

Chip

Customizes the badge label and its frame.

• Label Font Size / Label Font Weight / Label Font Style: Style the badge text.
• Border Size / Border Style / Border Radius: Customize the badge frame.
• Line Height: Adjust the height of the label line.

Avatar

Customizes the optional avatar shown inside the badge.

• Border Size / Border Color / Border Style: Customize the avatar border.
• Initials Font Color / Initials Font Color Hover / Initials Font Weight / Initials Font Weight Hover: Style the avatar initials.
• Icon Background Color / Icon Foreground Color: Set the avatar icon colors.
• Image Object Fit: Control how an avatar image fits its frame.

Variant Colors

Sets the badge colors for the selected variant. The same set of options is shown for whichever variant is active (set per variant: Base, Brand, Error, Info, Inverse, Alt-Inverse, Offline, Success, Warning).

• Background: Set the badge background color.
• Border Color: Set the badge border color.
• Text Color: Set the label text color.
• Outline Text Color: Set the label text color when Outline is enabled.

Troubleshooting Common Issues

• Badge Not Visible — Check the Variant setting for hidden or low-contrast styles; ensure the Label field is not empty.
• Avatar Not Loading — Verify the Image Source URL is publicly accessible or that the Icon Name uses the correct format (e.g., standard:user); test bindings with a static value first.
• Overly Long Label — Badges truncate long text; keep labels short and concise.
• Color Clashes — Preview in different themes and adjust the Variant to ensure sufficient contrast and readability.
• Bindings Not Updating — Confirm the Label or Avatar fields are bound to variables or formulas; use the debug panel in preview mode to inspect values.