Status

The Avonni Status component displays a small badge that maps a value to a predefined visual state — combining a label, an icon, and a color. Use it anywhere you need a clear, at-a-glance representation of a status field, such as a record's stage, priority, or health.

Overview

The Status component renders a read-only badge. You define the possible states up front (for example "Active", "Pending", "Archived"), then bind the component's Value to a Salesforce field — typically a picklist or formula — and the component automatically displays the matching state.

Use it on record pages, list rows, and dashboards anywhere you'd otherwise write conditional formula text.

Quick Start: Show Account Status with Color and Icon

This walkthrough builds a status badge for the Account Type field that shows green for Customer, orange for Prospect, and grey for Other.

Add the Status component to the Canvas

From the Component Library (left sidebar), drag the Status component onto the Canvas.

Bind the value to the Account record

Bind the value to the Account record

In the Properties Panel (right), set Value to {!$Record.Type}.

Why: This tells the component which state to display based on the current Account's Type picklist value.

Define the possible states

Click into the States section.
Click + Add State three times and configure each:
Label
Value
Icon Name
Color
Customer
Customer - Direct
utility:success
#2e844a (green)
Prospect
Prospect
utility:clock
#fe9339 (orange)
Other
Other
utility:info
#747474 (grey)

Why: The Value field of each state must match the Salesforce picklist API value exactly — that's how the component knows which state to render.

Configure visual settings

Icon Size: Small (good fit for inline placement next to other fields).
Icon Position: Left.
Stretch: Off (the badge sizes to its content).

Save and Activate

Click Save in the top right.
Click Activate and add the component to the Account Lightning Record Page using the Lightning App Builder.

Configuration

To configure the Status component, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.

Value

The value of the status to display. The component matches this against each state's Value and renders the first match. Typically bound to a Salesforce field using an expression like {!$Record.FieldName}.

Icon Size

The size of the icon displayed alongside the state label. Options: Xxs, Xs, Small, Medium (default), Large.

Icon Position

Describes the position of the icon relative to the label. Options: Left (default), Right.

Stretch

If enabled, the status badge takes the entire available width of its container. When disabled, the badge sizes to fit its content.

States

The States collection defines every possible status the component can display. Each state specifies a unique combination of an icon and a color for visual clarity.

How matching works

When the component renders, it looks at the Value property and finds the first state whose Value matches. If no state matches, the component renders nothing — no error, no fallback.

Per-state settings

Property

Description

Required

Label

The text shown to the user (for example, "Active").

Value

The internal identifier matched against the component's Value property. Must be unique across states. For Salesforce picklist sources, this is the picklist API value.

Yes (unique)

Icon Name

SLDS icon displayed alongside the label (for example, utility:success).

Color

The color applied to the state's icon and label text. Use Salesforce Lightning palette values for visual consistency.

Tooltip

Text displayed when the user hovers over the label. Useful for explaining what each status means.

Recommended Salesforce Lightning Colors

Match colors to the Salesforce design system so badges read consistently with the rest of the page.

Status

Hex

Use for

Green

#2e844a

Success, Active, Customer, Won

Blue

#0176d3

Info, In Progress, Working

Orange

#fe9339

Warning, Pending, At Risk

Red

#ba0517

Error, Lost, Critical

Grey

#747474

Inactive, Archived, Unknown

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Use Cases

Pill-Style Case Status Badge

Renders a colored pill matching Salesforce's modern badge pattern.

Bind to Case Status

Add the Status component to the Case Lightning Record Page.
Value: {!$Record.Status}
Define states matching your Case Status picklist values: New, Working, Escalated, Closed.

Match the pill aesthetic

In the Style tab, set:
- Background Color: matches the state color at low opacity (for example, #e8f5ed for the green Active state).
- Padding: Around Small.
- Border Radius: 1rem (creates the pill shape).
In each state's Color, use the corresponding solid value from the table above.

Styling

Beyond the per-state color, the Style tab gives you control over the badge's appearance. Configure it from the Style tab of the configuration panel.

Controls the outer spacing around the badge — useful for sitting it inside a card or row.

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

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

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

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.

Controls the badge's dimensions.

Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.

Styles the badge container.

Background Color: Fill behind the badge. Combined with a matching foreground color, this turns the component into a pill-style badge.
Horizontal Alignment: Where the badge sits inside its container when Stretch is off.

Styles the status label text.

Font Size / Font Style / Font Weight / Font Family: Control the label typography.
Line Clamp: Truncates long labels after the specified number of lines.

Troubleshooting Common Issues

Badge is blank — nothing displays — The Value doesn't match any state's Value. The component renders nothing instead of falling back, so a typo or mismatched picklist API name results in an empty badge. In Debug, log the bound field's value and verify it exactly matches one of the state values. Picklist values are case-sensitive — Closed Won and closed won are different.
Color and icon don't appear, only the label — The state matched but has no Icon Name or Color set. Open the matching state in the States editor and add the icon and color values.
Two states share the same value and the wrong one renders — State values must be unique; the component renders the first match. Edit the duplicate state and give it a unique value.
Tooltip doesn't appear on hover — The state has no Tooltip text, or the user is on a touch device (tooltips don't fire from tap). Add tooltip text to the state; for mobile, put critical context in the label itself instead of relying on the tooltip.
Badge takes full width when it shouldn't — Stretch is on. Turn off Stretch in the configuration panel.
Badge color doesn't match the surrounding page styling — The hex color is too saturated or doesn't align with Lightning Design System tokens. Use the Salesforce Lightning palette values from the table in the Configuration section.
Picklist value contains a space and doesn't match — Spaces in the Value field of the state need to match the picklist exactly, including spaces. Copy the picklist API value directly from Setup → Object Manager → the field's picklist values, then paste it into the state's Value.
Status component isn't reactive — it doesn't update when the record changes — Standard Lightning Record Page caching. Wire a Refresh Record Page action wherever the underlying field is updated, or rely on the user navigating away and back.

Last updated 2 months ago

Was this helpful?