> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/status.md). # 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. {% 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 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"). | 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** | The color applied to the state's icon and label text. Use Salesforce Lightning palette values for visual consistency. | No | | **Tooltip** | Text displayed when the user hovers over the label. 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 | *** ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Use Cases ### 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 %} *** ## 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the badge's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="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. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Content" %} 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. {% endtab %} {% tab title="Label" %} 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. {% endtab %} {% endtabs %} *** ## 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/status.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.