YouTube ChannelBook A DemoContact SupportInstall the Avonni Dynamic Components

Badge

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

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

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 (e.g., borders, shadows, colors).

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.

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.

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.

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

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.

Last updated

Was this helpful?