Status labels
Highlights key information for users.
Examples
Status labels are used to highlight key information to users. They can be used to indicate a progress status such as incomplete, in progress etc. or to highlight statistical information on a report or dashboard.
Usage
Default status label
Used to convey a neutral state. If the label doesn't fall clearly into the primary, success, warning or danger category, use the default label. It should also be used for less important information.
Primary status label
Primary label is usually the first-choice label you would use.
Success status label
Used when information has positive outcomes, such as a form successfully submitted, or the progress status is complete.
Warning status label
Used to alert users to potentially hazardous issues, situations or data that require attention.
Danger status label
Used to communicate critical or error states that require immediate attention, or for when information status is considered dangerous or fatal.
Do:
- ensure your status labels are accessible by including a clear text description, as colour alone cannot be used to indicate state
- display and position the status label(s) appropriately, considering its location within the UI
Avoid:
- having too many status labels on one line or on the page as it can result in cognitive overload
Default status label
Primary status label
Success status label
Warning status label
Danger status label
Neutral status label
Default status label
Primary status label
Primary status label
Success status label
Warning status label
Danger status label
Neutral status label
<turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault"></turas-status-indicator>
<turas-status-indicator status-title="Primary status label"></turas-status-indicator>
<turas-status-indicator status-title="Primary status label" status-indicator-style="StatusIndicatorPrimary"></turas-status-indicator>
<turas-status-indicator status-title="Success status label" status-indicator-style="StatusIndicatorSuccess"></turas-status-indicator>
<turas-status-indicator status-title="Warning status label" status-indicator-style="StatusIndicatorWarning"></turas-status-indicator>
<turas-status-indicator status-title="Danger status label" status-indicator-style="StatusIndicatorDanger"></turas-status-indicator>
<turas-status-indicator status-title="Neutral status label" status-indicator-style="StatusIndicatorNone"></turas-status-indicator>
<div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator primary "><div class="contain"><span class="status-indicator-title">Primary status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator primary "><div class="contain"><span class="status-indicator-title">Primary status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator success "><div class="contain"><span class="status-indicator-title">Success status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator warning "><div class="contain"><span class="status-indicator-title">Warning status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator danger "><div class="contain"><span class="status-indicator-title">Danger status label</span><span class="status-indicator-content" ></span> </div></div>
<div class="statusIndicator none "><div class="contain"><span class="status-indicator-title">Neutral status label</span><span class="status-indicator-content" ></span> </div></div>
Default status labelInner content
Primary status labelInner content
Primary status labelInner content
Success status labelInner content
Warning status labelInner content
Danger status labelInner content
Neutral status labelInner content
<turas-status-indicator status-title="Default status label" status-indicator-style="StatusIndicatorDefault">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Primary status label">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Primary status label" status-indicator-style="StatusIndicatorPrimary">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Success status label" status-indicator-style="StatusIndicatorSuccess">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Warning status label" status-indicator-style="StatusIndicatorWarning">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Danger status label" status-indicator-style="StatusIndicatorDanger">Inner content</turas-status-indicator>
<turas-status-indicator status-title="Neutral status label" status-indicator-style="StatusIndicatorNone">Inner content</turas-status-indicator>
<div class="statusIndicator default "><div class="contain"><span class="status-indicator-title">Default status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator primary "><div class="contain"><span class="status-indicator-title">Primary status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator primary "><div class="contain"><span class="status-indicator-title">Primary status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator success "><div class="contain"><span class="status-indicator-title">Success status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator warning "><div class="contain"><span class="status-indicator-title">Warning status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator danger "><div class="contain"><span class="status-indicator-title">Danger status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
<div class="statusIndicator none "><div class="contain"><span class="status-indicator-title">Neutral status label</span><span class="status-indicator-content" >Inner content</span> </div></div>
Optional parameters
- status-title - the status label title
- status-indicator-style - change or specify the default Primary style. For example, StatusIndicatorDefault, StatusIndicatorPrimary, StatusIndicatorSuccess, StatusIndicatorWarning, StatusIndicatorDanger, StatusIndicatorNone
- content-id - sets an ID on the inner content (status-indicator-content class)
- id - the HTML ID attribute
Accessibility status
This component hasn't been fully tested for WCAG 2.2 compliance.
Testing
- if interactive check keyboard navigation to ensure the status labels are in expected tab order and doesn't cause a keyboard trap
- check that buttons that are associated with status labels can be used with return, enter and space bar to activate them
- test status labels with screen readers to ensure they are announced as expected
Developer considerations
- apply role="status" to the element containing the status label. This informs assistive technologies that the content within this element should be treated as a status message
- If there is a live update element to the status labels make sure the appropriate ARIA attribute is used we would recommend using aria-live = "polite" so this will not interfere with more important items on the page
