# 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. {% stepper %} {% step %} #### **Add the Status component to the Canvas** From the **Component Library** (left sidebar), drag the **Status** component onto the Canvas. {% endstep %} {% step %} #### **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.* {% endstep %} {% step %} #### **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.* {% endstep %} {% step %} #### **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). {% endstep %} {% step %} #### **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. {% endstep %} {% endstepper %} *** ## 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. {% stepper %} {% step %} #### **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`. {% endstep %} {% step %} #### **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. {% endstep %} {% endstepper %} *** ## 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. | --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/status.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.