Tag
Tag is used for displaying concise, contextual information such as labels, categories and statuses within your application.
Also known as: badge, chip, label, pill, status badge, status tag, token
Basic usage
Permalink to "Basic usage"Tag - Status variations
Permalink to "Tag - Status variations"<bolt-tag label="error" status="error"></bolt-tag>
<bolt-tag label="info" status="info"></bolt-tag>
<bolt-tag label="success" status="success"></bolt-tag>
<bolt-tag label="warning" status="warning"></bolt-tag>Tag - Color variations
Permalink to "Tag - Color variations"<bolt-tag label="Label"></bolt-tag><bolt-tag label="charcoal" color="charcoal"></bolt-tag>
<bolt-tag label="darkBlue" color="darkBlue"></bolt-tag>
<bolt-tag label="darkGray" color="darkGray"></bolt-tag>
<bolt-tag label="darkSeaBlue" color="darkSeaBlue"></bolt-tag>
<bolt-tag label="deepPurple" color="deepPurple"></bolt-tag>
<bolt-tag label="lavender" color="lavender"></bolt-tag>
<bolt-tag label="lemonYellow" color="lemonYellow"></bolt-tag>
<bolt-tag label="mediumBlue" color="mediumBlue"></bolt-tag>
<bolt-tag label="paleGray" color="paleGray"></bolt-tag>
<bolt-tag label="seaBlue" color="seaBlue"></bolt-tag>
<bolt-tag label="sunburstOrange" color="sunburstOrange"></bolt-tag>
<bolt-tag label="white" color="white"></bolt-tag>Parameters
Permalink to "Parameters"label: required. The label text for the tag.status: optional. Options include:error,info,successandwarning.The
statusandcolorproperty should not be used together. Thestatusproperty overrides thecolorproperty.color: optional. Defaults topaleGray. Other options include:charcoal,darkBlue,darkGray,darkSeaBlue,deepPurple,lavender,lemonYellow,mediumBlue,paleGray,seaBlue,sunburstOrange,white.
General guidelines
Permalink to "General guidelines"- Tags are in-line, non-interactive components used to help the user quickly navigate content by calling out specific pieces of information.
- Tags are ideal for grouping items by themes or categories and denoting statuses not generated by immediate user input.
Status Tags
Permalink to "Status Tags"- Should display a status icon along with a plain-text label.
- Are only available in status colors.
Color Tags
Permalink to "Color Tags"- Should only be a plain-text label.
- Multiple brand accent color options are allowed.
When to use
Permalink to "When to use"- Use the Tag component to categorize, label, or highlight key information within your application.
- Use Status Tags when attracting user attention to content or UI elements with changed or changing status.
- Use Color Tags to increase scannability of large amounts of content.
When not to use
Permalink to "When not to use"- Don't use a Tag when an interactive element is needed.
When to use something else
Permalink to "When to use something else"- Consider using Button, Link or Chip instead of Tag for creating an object that triggers an interaction.
- Consider using Contextual help, body text or a heading with detailed text instead of exceeding 1–2 words for labels.
Do
- Use to categorize different pieces of information that may be displayed similarly.
- Pair with headings or body text.
- Use in data tables or list groups.
- Reserve Status Tags for communicating status information that users may need to pay attention to such as accounts with late payments, NIGO items, etc.
- Keep labels short and clear; ideally no more than 1-2 words.
Don't
- Don't let a Tag get cut off or collide with another element.
- Don't use Tags as interactive components.
- Don't use Status Tags in-place of a notification, modal or in-component error message.
- Refrain from using Tags excessively. Too many Tags can clutter the interface.
- Label text shouldn't wrap or truncate.
Content guidelines
Permalink to "Content guidelines"- Label text should not wrap or truncate.
- Labels should be short and clear; 1-2 words is ideal.
Accessibility compliance
Permalink to "Accessibility compliance"-
WCAG 2.2 Compliant
-
JAWS 2025 Tested
-
NVDA 2025 Tested
-
VoiceOver Tested
-
Keyboard Tested
-
aXe Tested
Important Notes
Permalink to "Important Notes"- When using
<bolt-tag>directly, developers are responsible for ensuring it is used in an accessible manner. - Tag is a read-only element. It won't receive focus nor be included in the tab order.
Best practices
Permalink to "Best practices"- If necessary, add screenreader-only (visually hidden) text as part of the element in which the tag is used.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.