Tag - Usage

Sky Glass

Paid

Thanks for paying your latest bill

Basic Guidelines

The Tag component serves as a visual indicator of a product or service’s status. Each colour signals a different level of urgency or opportunity. Tags are not interactive.

Icons are optional and can be used to can enhance the tone of the message.

The Tag has a maximum width of 200px, regardless of the viewport. If the label is too long, the text will be truncated with an ellipsis.

More text will be truncated beyond this point

This is the max. width of 200px

Variants Usage

Each tag colour signals a different level of urgency or opportunity. Do not change the colour of the Tags.

Neutral

Convey informational status without requiring immediate action (e.g., "Pending activation").

Positive

Indicate a conformational status or highlight opportunities/promotions, such as upgrades or enhancements (e.g., “Paid”, "Upgrade available").

Negative

Indicate an issue that needs attention, often due to disruption or restriction (e.g., "Service blocked").

Content Guidance

The label within the Tag should be direct and informative.
Keep it brief, under two or three words (about 20 characters), so it's easy to read at a glance.
Only use adjectives (descriptive words). Avoid beginning with verbs (action words), as it could be interpreted as a call-to-action which might make the user think the Tag is clickable.

Service blocked

Keep the label as short and precise as possible.

Activation pending

Included

Write labels as a matter of fact.

Service is currently not available

Avoid long labels and truncation.

Service is currently unavailable

Don’t wrap labels over multiple lines.

Activate SIM

Include

Avoid labels that sound like CTAs.

Alignment

Position the Tag in close proximity to the object it refers to.

Sky Glass

Paid

Thanks for paying your latest bill

Sky Glass

Thanks for paying your latest bill

View bill Make a payment Change payment method

Paid

Icon Usage

Dont change the icon size.
Since the icon is very small, only use easily recognisable and familiar icons to enhance the label.

Paid

Keep the icons simple.

Paid

Complex icons are not legible at this size.

Notes on Accessibility

Tags increase the cognitive load on screen. Use them in moderation.

The minimum required contrast ratio to hit the AA standard for elements with small text is 4.5. Brightness and saturation levels of the background colours have been adjusted to reach the required ratio.

Contrast ratio
4.51:1

Contrast ratio
4.58:1

Contrast ratio
7.92:1

Measured using the “Stark — Contrast and Accessibility Checker” plugin.