Status

Overview

The Status component renders a small status badge with a label, an icon, and a color. 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.

It's a read-only display component. 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.

1

Add the Status component to the Canvas

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

2

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.

3

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.

4

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

5

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

The Status component has two configuration areas: the States (the list of possible statuses) and the visual settings (size, icon position, stretch).

General Settings

These appear in the Properties Panel after selecting the Status component.

Setting	Description	Options / Default
Value	The value of the state to display. The component matches this against each state's Value and renders the first match. Typically bound to a Salesforce field.	Any text — usually {!$Record.FieldName}
Icon Size	Size of the state's icon.	Xxs, Xs, Small, Medium (default), Large
Icon Position	Where the icon appears relative to the label.	Left (default), Right
Stretch	If on, the component takes the entire available width. If off, the badge sizes to fit its content.	On / Off (default: off)

States

The States array defines every possible status the component can display. Each state has its own label, color, icon, and optional tooltip.

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.

State Properties

Property	Description	Required
Label	The text shown to the user (for example, "Active").	Yes
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).	No
Color	Hex color applied to both the icon and the label text. Use Salesforce Lightning palette values for visual consistency.	No
Tooltip	Text shown when the user hovers over the badge. Useful for explaining what each status means.	No

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

---

Style

Beyond the per-state color, the Status component supports standard styling through the Style tab in the Properties Panel.

Style Section	What you can adjust
Margin / Padding / Border	Spacing and border around the badge — useful for sitting it inside a card or row.
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.
Label Font Size / Style / Weight / Family	Typography for the status label.
Line Clamp	Truncates long labels after the specified number of lines.

---

Examples

Pill-Style Case Status Badge

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

1

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.

2

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.

---

Troubleshooting

Problem	Cause	Fix
The 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 Properties 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.