Status

avonni-status

Displays a status indicator that maps a value to a configured state, with an optional icon and label.

Overview

Status is a Lightning Web Component that displays the current state of a record or process from a defined list of states, complete with an icon, label, color, and optional tooltip.

Use it in your own Lightning Web Components to surface a single, glanceable status driven by a list of possible states. You define the states once and bind the active one through the value attribute; the component renders the matching icon and label.

Use Cases

• Case status: Show whether a case is Open, In Progress, Resolved, or Escalated.
• Approval flows: Indicate the current step of an approval process.
• Order pipelines: Display where an order sits in fulfillment.
• Task tracking: Reflect the state of a task or to-do item.
• Sync indicators: Communicate a record's processing or sync state.

---

Icon Size Guidelines

Size	Use Case
xx-small / x-small	Inline status next to dense text or list rows.
small	Compact cards and detail panels.
medium	Default for most layouts.
large	Headers and prominent status displays.

---

Use Case Examples

Example 1: Case status indicator

Scenario: Show the current status of a support case using a fixed set of states with distinct icons and colors.

<!-- caseStatus.html -->
<template>
    <avonni-status
        states={states}
        value={value}
        icon-position="left"
        icon-size="small"
    ></avonni-status>
</template>

// caseStatus.js
import { LightningElement } from 'lwc';

export default class CaseStatus extends LightningElement {
    states = [
        { value: 'open', label: 'Open', iconName: 'utility:routing_offline', color: '#54698d' },
        { value: 'in-progress', label: 'In Progress', iconName: 'utility:clock', color: '#0176d3' },
        { value: 'resolved', label: 'Resolved', iconName: 'utility:success', color: '#2e844a' },
        { value: 'escalated', label: 'Escalated', iconName: 'utility:warning', color: '#ba0517' }
    ];
    value = 'in-progress';
}

Result: A blue clock icon with the label "In Progress" appears; changing value swaps to the matching state.

Example 2: Status with tooltip and right-aligned icon

Scenario: Provide extra context on hover and place the icon after the label.

<!-- orderStatus.html -->
<template>
    <avonni-status
        states={states}
        value="resolved"
        icon-position="right"
        icon-size="medium"
    ></avonni-status>
</template>

// orderStatus.js
import { LightningElement } from 'lwc';

export default class OrderStatus extends LightningElement {
    states = [
        {
            value: 'resolved',
            label: 'Resolved',
            iconName: 'utility:success',
            color: '#2e844a',
            tooltip: 'The case has been successfully resolved.'
        }
    ];
}

Result: A green "Resolved" label with the success icon on the right and a tooltip shown on hover.

---

Specifications

Attributes

Name	Description	Type	Default	Required
icon-position	Position of the icon relative to the label. Valid values include left and right.	String	"left"
icon-size	Size of the icon. Valid values include xx-small, x-small, small, medium, or large.	String	"medium"
states	Array of available state objects. The selected state will be displayed as the current status.	AvonniStatusState[]	—
value	Value of the selected state.	String	—

Styling Hooks

CSS Variable	Type	Default
--avonni-status-horizontal-alignment	string	flex-start
--avonni-status-label-font-family	font	—
--avonni-status-label-font-size	length	0.8125rem
--avonni-status-label-font-style	string	normal
--avonni-status-label-font-weight	number	400
--avonni-status-label-line-clamp	number	1

Key Considerations

• Value mapping: value must exactly match one state's value or nothing is rendered.
• Colors: The color on each state is applied to its icon—use it to reinforce meaning.
• Tooltips: Add a tooltip to a state to surface additional context on hover.
• Single status: The component shows one active state at a time, not a multi-step progress bar.
• Best Practice: Keep the states list stable and bind value to your record data so the displayed status always reflects the source of truth.

---

Troubleshooting Common Issues

• Nothing displays: Confirm value matches the value of an entry in states.
• Icon missing: Verify each state's iconName is a valid SLDS icon (e.g. utility:clock).
• Wrong color: Set the color property on the relevant state object; it expects a valid CSS color string.
• If issues persist: Contact our support team at [email protected] for assistance.