ba-tag
To indicate an items status or indicating the state of something. For example the status of a flight, or the British Airways Club tiers
Make the labels directly relevant. Tags should accurately represent the content they are associated with.
For example if you’re demonstrating features of a flight, don’t use one colour for wifi and another for baggage. Doing so can increase the cognitive noise of the page.
Tags can increase the amount of cognitive noise on a page, so don't overcrowd your interface with too many and use them sparingly.
Further reading:
Tags are not interactable so should not be clickable. Doing so could confuse users as they might see them as clickable when others are not.
Shapes and symbols can mean different things to different people. Commonly recognisable icons are rare and the same icon can have a different meaning depending on the app or website used. Making sure the tag has text with the icon can remove the ambiguity and clarify the meaning
Further Reading:
A tag should always include text, making alternative text unnecessary. Even when an icon is present, the tag’s text alone conveys the icon's meaning
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
icon |
icon |
The icon to display | string |
'' |
size |
size |
The size of the tags text | "large" | "small" |
'small' |
variant |
variant |
The variant of the tag | "default" | "error" | "info" | "premier" | "the-club-blue" | "the-club-bronze" | "the-club-silver" | "the-club-gold" | "the-club-gold-guest-list" | "the-club-premier" | "sale" | "success" |
'default' |
Usage
Basic usage
<ba-content>
<ba-tag variant="sale">On Sale</ba-tag>
<h2>Sale now on!!</h2>
</ba-content>
With an icon
<ba-content>
<ba-tag variant="success" size="large" icon="tick">Success</ba-tag>
<h2>Order Complete</h2>
</ba-content>