Status labels

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

Success status label

Warning status label

Danger status label

Neutral status label

Copy


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

Copy


    <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

Success status labelInner content

Warning status labelInner content

Danger status labelInner content

Neutral status labelInner content

Copy


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

Copy


    <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

Switcher

Examples

Usage

Default status label

Primary status label

Success status label

Warning status label

Danger status label

Optional parameters

Accessibility status

Testing

Developer considerations

Suggest a new component

Build accessible experiences

Form components

Was this page helpful?