Tags

A tag is a static or interactive component used to show status, key details, or categories. It can also help users filter content by selecting or entering relevant information.

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 common 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

Semantics

For accessibility reasons, any 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 <h2> or <p> elements. The input tags are implemented as <button> elements. You may use any semantic element that best fits the context.

Tag and input tag lists must be wrapped in a semantic container (usually a <ul> or <ol>). If possible, display a text that semantically describes the purpose of the tags, otherwise add an aria-label to the container that explains the tags' function.

Mobile coverage:

Roaming
5G Ready
4G

 <div class="d-inline-flex align-items-center">
  <h4 id="tagsTitle" class="h6 me-small">Mobile coverage: </h4>
  <div role="group" aria-labelledby="tagsTitle">
    <ul class="list-unstyled d-flex column-gap-xsmall">
      <li class="tag">Roaming</li>
      <li class="tag">5G Ready</li>
      <li class="tag">4G</li>
    </ul>
  </div>
</div>
 

html

Roaming
5G Ready
4G

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

html

Information for visually impaired users

Keep in mind that visually impaired and blind users will lack the visual context (color and icons for instance) that permits to understand the tags purpose on the page, if tags' labels are not self-explanatory. In that case, it's mandatory to add .visually-hidden information to explain what it represents.

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

Tag

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. Tags can include icons or bullets.

To ensure accessibility, pay attention to the semantics of the tags you use and adapt the examples to your specific use cases. Also, make sure you convey information correctly to users with visual impairments. Read more about tags accessibility here.

Variants

Status and appearance

Tags hold status depending on the context of the information they represent. Each status is designed to convey a specific meaning. Their appearance can be emphasized for main tags or muted for secondary tags (by adding .tag-muted). They are emphasized by default.

Non-functional

Non-functional tags are used to display categories, default states, or to draw attention without carrying a specific functional meaning (unlike functional tags, see below).

Neutral emphasized (default)
Accent emphasized

Neutral muted
Accent muted

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Non-functional emphasized tags (default)">
  <li class="tag">Neutral emphasized (default)</li>
  <li class="tag tag-accent">Accent emphasized</li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Non-functional muted tags">
  <li class="tag tag-muted">Neutral muted</li>
  <li class="tag tag-accent tag-muted">Accent muted</li>
</ul> 

html

Functional

Functional tags communicate specific statuses or system feedback (e.g., success, warning, error, information). 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 a strong meaning, reflect it in the tag's text and if necessary add additional text with the class .visually-hidden. Read more about tags accessibility here.

Positive emphasized
Info emphasized
Warning emphasized
Negative emphasized

Positive muted
Info muted
Warning muted
Negative muted

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Functional emphasized tags (default)">
  <li class="tag tag-positive">Positive emphasized</li>
  <li class="tag tag-info">Info emphasized</li>
  <li class="tag tag-warning">Warning emphasized</li>
  <li class="tag tag-negative">Negative emphasized</li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Functional muted tags">
  <li class="tag tag-positive tag-muted">Positive muted</li>
  <li class="tag tag-info tag-muted">Info muted</li>
  <li class="tag tag-warning tag-muted">Warning muted</li>
  <li class="tag tag-negative tag-muted">Negative muted</li>
</ul> 

html

Icon

Non-functional

To display a colored icon in non-functional tags, add the icon inside the tag, with a .tag-icon class.

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.

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 emphasized (default)
Accent emphasized

Neutral muted
Accent muted

Settings

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Non-functional emphasized icons">
  <li class="tag">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Neutral emphasized (default)
  </li>
  <li class="tag tag-accent">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Accent emphasized
  </li>
</ul>
<ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Non-functional muted icons">
  <li class="tag tag-muted">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Neutral muted
  </li>
  <li class="tag tag-accent tag-muted">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    Accent muted
  </li>
</ul>
<p class="tag">
  <span class="si-settings tag-icon" aria-hidden="true"></span>
  Settings
</p> 

html

Functional

As functional tags communicate specific statuses, each status must always be paired with its dedicated functional icon that matches the meaning of the tag, and other icons must not be used. To display a status icon, just add a <span> with the .tag-status-icon class inside the tag.

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

Activated
Coming soon
Under maintenance
Error

Success Tested
Info Manually tested
Caution Not tested
Error Tested

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

html

Bullet

To add a colored bullet in the tag, add a <span> with a class .tag-bullet inside the tag.

Neutral
Accent
Positive
Info
Warning
Negative

Neutral
Accent
Positive
Info
Warning
Negative

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Bullet tag examples">
  ...
  <li class="tag">
    <span class="tag-bullet"></span>
    Neutral
  </li>
  ...
  <li class="tag tag-accent tag-muted">
    <span class="tag-bullet"></span>
    Accent
  </li>
</ul> 

Rounded corner

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

Squared accent emphasized
Squared info muted

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Keywords">
  <li class="tag tag-accent rounded-none">Squared accent emphasized</li>
  <li class="tag tag-info tag-muted rounded-none">Squared info muted</li>
</ul> 

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 clickable card. If the tag has been added a .disabled class, or is inside an element with a .disabled class it will look dimmed, whatever its status or appearance.

Disabled Some text

 <div class="disabled mb-medium">
  <p><span class="tag tag-accent">Disabled</span> Some text</p>
</div>
<p class="disabled"><span class="tag tag-accent">Disabled</span> Some text</p>
<p><span class="tag tag-accent 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:

Loading Label

 <p class="tag tag-accent">
  <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.

Loading Label

 <p class="tag tag-accent 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-small to the tag.

Small neutral
Roaming
5G Ready
Settings
Loading ...

 <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium" aria-label="Mobile coverage">
  <li class="tag tag-small">Small neutral</li>
  <li class="tag tag-small">
    <span class="tag-bullet"></span>
    Roaming
  </li>
  <li class="tag tag-small">
    <svg aria-hidden="true" class="tag-icon">
      <use xlink:href=/orange/docs/0.5/assets/img/ouds-web-sprite.svg#heart-empty />
    </svg>
    5G Ready
  </li>
  <li class="tag tag-small">
      <span class="si-settings tag-icon" aria-hidden="true"></span>
      Settings
  </li>
  <li class="tag tag-accent tag-small 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

New Some text

 <ul class="list-unstyled d-flex column-gap-xsmall" 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-xsmall" aria-label="Mobile coverage">
  <li class="tag tag-small">Roaming</li>
  <li class="tag tag-small">5G Ready</li>
</ul>
<h2>Title <span class="tag align-middle">Coming soon</span></h2>
<h2>Title <span class="tag tag-small align-middle">Coming soon</span></h2>
<p><span class="tag">New</span> Some text</p>
<p><span class="tag tag-small">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-xsmall) and the vertical space (default value is obtained thanks to .row-gap-medium).

Label 1
Label 2
Label 3
Label 4
Label 5
Label 6

 <ul class="list-unstyled d-flex flex-wrap col-4 column-gap-xsmall row-gap-medium" 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

A input tag is a component that allows users to enter multiple values, each represented as a tag. As users type and submit values (usually by pressing enter, comma, or tab), each value is transformed into a tag. Input tags are often used for adding labels, categories, or participants. They typically support removing individual tags.

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

The input tags are implemented as <button> elements, 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.

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-xsmall" 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-xsmall" 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-xsmall). Vertical space is automatically created by the extended touch target heights.

 <ul class="list-unstyled d-flex flex-wrap col-4 column-gap-xsmall" 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

Tags

On this page On this page

Overview

Component types

Accessibility

Semantics

Mobile coverage:

Information for visually impaired users

Tag

Variants

Status and appearance

Non-functional

Functional

Icon

Non-functional

Functional

Bullet

Rounded corner

States

Disabled

Loading

Sizes

Layout

Title Coming soon

Title Coming soon

Input tag

States

Disabled

Layout

On this page