View on GitHub

Tags

A tag is a small element that shows short info like a label, keyword, or category. It helps users quickly find, group, or understand content.

On this page

You can find here the OUDS tag design guidelines.

Overview

Component types

  • Tag is used in an informative way, to show short info like a label, keyword, or category.

  • Input tag is interactive and can take all the usual states: enabled, hover, pressed, disabled or focused.

For both types of tag, OUDS Web has a basic .tag class that sets up default styles.

Tag

<p class="tag">Tag</p>
<button type="button" class="tag tag-input">Input tag<span class="visually-hidden">Remove this tag</span></button>

Accessibility

For accessibility reasons, a tag, like any other informative element, must either be a semantic element itself or be wrapped in an appropriate semantic HTML element. In the examples below, the tags appear as <li> elements or inside of <h2> and <p> elements. You may use any other semantic element that best fits the context.

Visually impaired and blind users will lack the visual context that permits to understand the tags purpose on the page if tags' labels are not self-explanatory. Thus it's mandatory to add textual information to explain what it represents, especially if the tags are in a list.

For tags lists: add a semantically informative text to describe the tags' list purpose if possible, otherwise an aria-label on the containing ul must be added.

Several examples are provided below but they will need to be adapted for actual use cases.

Tag

Overview

Tags lists must be wrapped in a semantic container (usually a <ul> or <ol>). If possible, display a semantically informative text to describe the tags' list purpose, otherwise an aria-label must be added to the container to explain the function of the tags, more information here.

  • Roaming
  • 5G Ready
  • 4G
<ul class="list-unstyled d-flex column-gap-xs" aria-label="Mobile coverage">
  <li class="tag">Roaming</li>
  <li class="tag">5G Ready</li>
  <li class="tag">4G</li>
</ul>
html

OUDS Web color and background utilities can be applied to display colored tag variants. Colors are classified in two hierarchies, emphasized (for key tags) or muted (for secondary tags), and each color has its own semantic purpose. Please follow the tag design guidelines to choose the right color for the right usage.

Keep in mind that color should not be the only way to convey information. If the color has strong meaning, reflect it in the tag's text and if necessary add additional text with the class .visually-hidden.

  • Neutral
  • Accent
  • Positive
  • Info
  • Warning
  • Negative
  • Neutral
  • Accent
  • Positive
  • Info
  • Warning
  • Negative
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Muted colors">
  <li class="tag text-bg-status-neutral-muted">Neutral</li>
  <li class="tag text-bg-status-accent-muted">Accent</li>
  <li class="tag text-bg-status-positive-muted">Positive</li>
  <li class="tag text-bg-status-info-muted">Info</li>
  <li class="tag text-bg-status-warning-muted">Warning</li>
  <li class="tag text-bg-status-negative-muted">Negative</li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Emphasized colors">
  <li class="tag text-bg-status-neutral-emphasized">Neutral</li>
  <li class="tag text-bg-status-accent-emphasized">Accent</li>
  <li class="tag text-bg-status-positive-emphasized">Positive</li>
  <li class="tag text-bg-status-info-emphasized">Info</li>
  <li class="tag text-bg-status-warning-emphasized">Warning</li>
  <li class="tag text-bg-status-negative-emphasized">Negative</li>
</ul>
html

Variants

Squared

To display tags with squared corners, add the .rounded-none utility class to the tag.

  • Accent muted
  • Accent emphasized
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Keywords">
  <li class="tag rounded-none text-bg-status-accent-muted">Accent muted</li>
  <li class="tag rounded-none text-bg-status-accent-emphasized">Accent emphasized</li>
</ul>
html

Bullet

To add a colored bullet in the tag, add <span class="tag-bullet"></span>.

  • Neutral
  • Accent
  • Positive
  • Info
  • Warning
  • Negative
  • Neutral
  • Accent
  • Positive
  • Info
  • Warning
  • Negative 
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="...">
  ...
  <li class="tag text-bg-status-neutral-muted">
    <span class="tag-bullet"></span>
    Neutral muted
  </li>
  ...
  <li class="tag text-bg-status-accent-emphasized">
    <span class="tag-bullet"></span>
    Neutral emphasized
  </li>
</ul>

Tag status

Functional

Status icons are predefined in SCSS for positive, info, warning and negative functional statuses. To display a status icon, just add .tag-status-icon inside the tag, the icon will change depending on the text utility used.

If the functional meaning of the text is not sufficiently clear, add additional text with the .visually-hidden class to ensure accessibility for all users.

  • Activated
  • Coming soon
  • Under maintenance
  • Error
  • Tested
  • Manually tested
  • Not tested
  • Tested 
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Functional muted statuses">
  <li class="tag text-bg-status-positive-muted">
    <span class="tag-status-icon"></span>
    Activated
  </li>
  <li class="tag text-bg-status-info-muted">
    <span class="tag-status-icon"></span>
    Coming soon
  </li>
  <li class="tag text-bg-status-warning-muted">
    <span class="tag-status-icon"></span>
    Under maintenance
  </li>
  <li class="tag text-bg-status-negative-muted">
    <span class="tag-status-icon"></span>
    Error
  </li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Functional emphasized statuses">
  <li class="tag text-bg-status-positive-emphasized">
    <span class="tag-status-icon"></span>
    <span class="visually-hidden">Success</span>
    Tested
  </li>
  <li class="tag text-bg-status-info-emphasized">
    <span class="tag-status-icon"></span>
    <span class="visually-hidden">Info</span>
    Manually tested
  </li>
  <li class="tag text-bg-status-warning-emphasized">
    <span class="tag-status-icon"></span>
    <span class="visually-hidden">Caution</span>
    Not tested
  </li>
  <li class="tag text-bg-status-negative-emphasized">
    <span class="tag-status-icon"></span>
    <span class="visually-hidden">Error</span>
    Tested
  </li>
</ul>
html

In case you need to use a different icon than the predefined ones, you can configure your own icons by overriding the custom properties (CSS variables) --bs-tag-positive-icon, --bs-tag-info-icon --bs-tag-warning-icon and --bs-tag-error-icon.

Non-functional

The recommended way to use icons is to fill an SVG sprite file, and use currentColor for styling. If really necessary, for example when you have a lot of icons, you can use an icon font. Find out more about using icons.

To display a colored icon, add the icon inside the tag, with a .tag-icon class.

Since icons in tags are always next to some text, they are purely decorative and should be hidden from assistive technologies using aria-hidden="true", as demonstrated in our examples.

  • Neutral
  • Accent
  • Neutral
  • Accent

Settings 

<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Non-functional muted statuses">
  <li class="tag text-bg-status-neutral-muted">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/sosh/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Neutral
  </li>
  <li class="tag text-bg-status-accent-muted">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/sosh/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Accent
  </li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Non-functional emphasized statuses">
  <li class="tag text-bg-status-neutral-emphasized">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/sosh/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Neutral
  </li>
  <li class="tag text-bg-status-accent-emphasized">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/sosh/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Accent
  </li>
</ul>
<p class="tag text-bg-status-accent-muted">
  <span class="si-settings tag-icon" aria-hidden="true"></span>
  Settings
</p>
html

States

Disabled

The disabled tag should only be used in a disabled context, inside an interactive element that has been disabled, such as a card. If the tag has been added a .disabled class, or is inside an element with a .disabled class it will look dimmed, whatever the text utility you used.

Disabled Some text

Disabled Some text

Disabled Some text

<div class="disabled mb-md">
  <p><span class="tag text-bg-status-accent-emphasized">Disabled</span> Some text</p>
</div>
<p class="disabled"><span class="tag text-bg-status-accent-emphasized">Disabled</span> Some text</p>
<p><span class="tag text-bg-status-accent-emphasized disabled">Disabled</span> Some text</p>
html

Loading

The loading state of a tag indicates that an action is currently processing or taking place. This state provides feedback to users, enhancing user experience.

To make an animated loading state tag, you will add in your standard tag:

  • An animated <svg>, with the class .tag-loader.
  • A status message <span>: the message must be updated regularly in order to be vocalized by screen readers.

For example, before loading, your tag could be like this:

Label 

<p class="tag text-bg-status-accent-emphasized">
  <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="tag-loader" aria-hidden="true">
    <circle class="tag-loader-inner" cx="20" cy="20" r="15"></circle>
  </svg>
  <span role="status" class="visually-hidden d-none">Loading</span>
  Label
</p>
html

When the loading starts, you will have to:

  • Add the class .loading to the tag to provide the appropriate styles and animation.
  • Remove the .d-none from the status message <span>.
  • Update regularly the status message <span> containing the loading message.

At the end of the loading, you should:

  • Remove the class .loading to restore the tag’s look.
  • Set a final status message in <span>, indicating the loading has ended (so we don’t add again .d-none on this status message).

You can see a similar live example with buttons with the full JavaScript code on our loading buttons live example.

Label 

<p class="tag text-bg-status-accent-emphasized loading">
  <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="tag-loader" aria-hidden="true">
    <circle class="tag-loader-inner" cx="20" cy="20" r="15"></circle>
  </svg>
  <span role="status" class="visually-hidden">Loading</span>
  Label
</p>
html

Sizes

To display a small tag, add the class .tag-sm to the tag.

  • Small neutral
  • Roaming
  • 5G Ready
  • ... 
<ul class="list-unstyled d-flex flex-wrap column-gap-xs row-gap-md" aria-label="Mobile coverage">
  <li class="tag tag-sm">Small neutral</li>
  <li class="tag tag-sm">
    <span class="tag-bullet"></span>
    Roaming
  </li>
  <li class="tag tag-sm">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/sosh/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    5G Ready
  </li>
  <li class="tag text-bg-status-accent-emphasized tag-sm loading">
    <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="tag-loader" aria-hidden="true">
      <circle class="tag-loader-inner" cx="20" cy="20" r="15"></circle>
    </svg>
    <span role="status" class="visually-hidden">Loading</span>
    ...
  </li>
</ul>
html

Layout

A tag can be used near some text or some title (to show status or key details), or in a list (to indicate categories or keywords). If needed, you can use the vertical alignment utilities to vertically center inline content.

  • Roaming
  • 5G Ready
  • 4G
  • Roaming
  • 5G Ready

Title Coming soon

Title Coming soon

New Some text

New Some text

<ul class="list-unstyled d-flex column-gap-xs" aria-label="Mobile coverage">
  <li class="tag">Roaming</li>
  <li class="tag">5G Ready</li>
  <li class="tag">4G</li>
</ul>
<ul class="list-unstyled d-flex column-gap-xs" aria-label="Mobile coverage">
  <li class="tag tag-sm">Roaming</li>
  <li class="tag tag-sm">5G Ready</li>
</ul>
<h2>Title <span class="tag align-middle">Coming soon</span></h2>
<h2>Title <span class="tag tag-sm align-middle">Coming soon</span></h2>
<p><span class="tag">New</span> Some text</p>
<p><span class="tag tag-sm">New</span> Some text</p>
html

Tags can be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to .column-gap-xs) and the vertical space (default value is obtained thanks to .row-gap-md).

  • Label 1
  • Label 2
  • Label 3
  • Label 4
  • Label 5
  • Label 6
<ul class="list-unstyled d-flex flex-wrap col-4 column-gap-xs row-gap-md" aria-label="Keywords">
  <li class="tag">Label 1</li>
  <li class="tag">Label 2</li>
  <li class="tag">Label 3</li>
  <li class="tag">Label 4</li>
  <li class="tag">Label 5</li>
  <li class="tag">Label 6</li>
</ul>
html

Input tag

Overview

Please note that all the variants of tag above must not be applied on input tag.

Input tags are interactive and may be associated to an input field to be added dynamically. The input tag should be used on a <button>, and can take all the usual states: enabled, hover, pressed, disabled or focused.

It can be removed on click, but you have to implement this behavior by yourself, with some JavaScript specific to your project.

Input tags lists must be wrapped in a semantic container (usually a <ul> or <ol>). If possible, display a semantically informative text to describe the tags' list purpose, otherwise an aria-label must be added to the container to explain the function of the tags, more information here.

Each input tag should contain a .visually-hidden text after the button text to indicate the action that will be performed when the tag is clicked.

<ul class="list-unstyled d-flex flex-wrap column-gap-xs" aria-label="Selected mobile coverage">
  <li>
    <button type="button" class="tag tag-input">
      Roaming
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
  <li>
    <button type="button" class="tag tag-input">
      5G Ready
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
  <li>
    <button type="button" class="tag tag-input">
        4G
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
</ul>
html

States

Disabled

To disable an input tag, just add the disabled attribute to the .tag.

<ul class="list-unstyled d-flex flex-wrap column-gap-xs" aria-label="Selected mobile coverage">
  <li>
    <button type="button" class="tag tag-input" disabled>
      Roaming
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
  <li>
    <button type="button" class="tag tag-input" disabled>
      5G
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
  <li>
    <button type="button" class="tag tag-input" disabled>
      4G
      <span class="visually-hidden">Remove this tag</span>
    </button>
  </li>
</ul>
html

Layout

Input tags are typically intended to be added side by side. They require horizontal and vertical spacing between each other. You can use flexbox utilities to manage the horizontal space (default value is obtained thanks to .column-gap-xs). Vertical space is automatically created by the extended touch target heights.

<ul class="list-unstyled d-flex flex-wrap col-4 column-gap-xs" aria-label="Selected keywords">
  <li><button type="button" class="tag tag-input">Label 1<span class="visually-hidden">Remove this tag</span></button></li>
  <li><button type="button" class="tag tag-input">Label 2<span class="visually-hidden">Remove this tag</span></button></li>
  <li><button type="button" class="tag tag-input">Label 3<span class="visually-hidden">Remove this tag</span></button></li>
  <li><button type="button" class="tag tag-input">Label 4<span class="visually-hidden">Remove this tag</span></button></li>
  <li><button type="button" class="tag tag-input">Label 5<span class="visually-hidden">Remove this tag</span></button></li>
  <li><button type="button" class="tag tag-input">Label 6<span class="visually-hidden">Remove this tag</span></button></li>
</ul>
html