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
Figma
GitHub
Storybook
Live Demo
<ba-tag>This is a tag</ba-tag>Guidelines
Make the labels directly relevant. Tags should accurately represent the content they are associated with.
The tag variants are designed to represent specific purposes. For example, use the error variant to indicate an error state, and the sale variant to indicate an item is in the sale. This helps maintain consistency and clarity across applications.
Tag colours may evoleve over time, but the purpose of each tag will remain the same. Choosing tags by their purpose rather than their colour ensures that the meaning remains clear even if the visual design changes.
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:
Accessibility
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
It's important to maintain the order of headings so that they appear in a logical order in the page. Screen readers (and other assistive technology) rely on headings to navigate and understand structure of pages.
Further reading
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
headingLevel |
heading-level |
Sets the accordion headingLevel, this will populate an |
2 | 3 | 4 | 5 | 6 | undefined |
undefined |
icon |
icon |
The icon to display | string | undefined |
'' |
size |
size |
The size of the tags text | "large" | "small" | undefined |
'small' |
variant |
variant |
The variant of the tag | "cabin-class-business" | "cabin-class-economy" | "cabin-class-first" | "cabin-class-premium-economy" | "critical-error" | "default" | "error" | "executive-club-bronze-tier" | "executive-club-gold-tier" | "executive-club-premier-tier" | "executive-club-silver-tier" | "info" | "sale" | "success" | "the-club-blue" | "the-club-bronze" | "the-club-gold" | "the-club-gold-guest-list" | "the-club-premier" | undefined |
'default' |
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | The main text of the tag | <Plain text> |
Parent components
ba-tag can be slotted into:
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>
Setting the heading level
<ba-content>
<ba-tag heading-level="2">Order Status</ba-tag>
<h3>Order Complete</h3>
</ba-content>