ba-tag
To indicate an item's status or the state of something. For example, the status of a flight or the British Airways Club tiers.
Airframe
Web Components
React
React Native
Anatomy
Icon (optional)
Optional icon that provides visual context to the tag
Text label
The text content that describes the tag's purpose or status
Container
The background container that houses the tag content
Design Documentation
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 evolve 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:
Live Demo
<ba-tag>This is a tag</ba-tag>Properties and 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' |
Permitted ARIA roles
- None
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
Most scenarios will only require the variant attribute and some content
<ba-content>
<ba-tag variant="sale">On Sale</ba-tag>
<h2>Sale now on!!</h2>
</ba-content>With an icon
Tags can include an optional icon to provide additional visual context
<ba-content>
<ba-tag variant="success" size="large" icon="tick">Success</ba-tag>
<h2>Order Complete</h2>
</ba-content>Setting the heading level
Use the heading-level attribute to maintain proper heading hierarchy in the page
<ba-content>
<ba-tag heading-level="2">Order Status</ba-tag>
<h3>Order Complete</h3>
</ba-content>Guidelines
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
Keyboard navigation
No keyboard interactions have been defined for this component.
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-tag uses specific and concise labels that accurately represent the associated content
- ba-tag variant is chosen by purpose (e.g., error, sale, success) not by colour preference
- Tag colours are not mixed and matched for unrelated items in the same context
- Tags are used sparingly to avoid cluttering the interface and increasing cognitive noise
- ba-tag is not made clickable as tags are non-interactive status indicators
- Icons are always accompanied by supporting text to clarify meaning
Accessibility checklist
- ba-tag has discernible text
- ba-tag text is not in all caps
- Use the heading-level attribute to maintain proper heading hierarchy in the page
These checks are handled by the component and do not need to be repeated each time it is used.
- ba-tag is perceivable using assistive technology
- Icon (when present) is decorative and hidden from screen readers with text always present
- Colour contrast for all variants in all BAgel themes
- High contrast mode adjustments