# Tags & Pills

# Overview

Tag Pill


<us-tag variant="info">
    Tag
</us-tag>

<us-tag pill variant="info">
    Tag
</us-tag>

1
2
3
4
5
6
7
8
9

Tags can be used as part of links or buttons to provide a counter (or similar flag).

<div>
    <us-button variant="primary">
        Notifications 
        <us-tag variant="light" class="ml-1">4</us-tag>
    </us-button>
</div>

1
2
3
4
5
6

Note that depending on how they are used, tags may be confusing for users of screen readers and similar assistive technologies. While the styling of tags provides a visual cue as to their purpose, these users will simply be presented with the content of the tag. Depending on the specific situation, these tags may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. For exmaple;

<div>
    <us-button variant="primary">
        Notifications 
        <us-tag variant="light" class="ml-1">
            4 <span class="sr-only">unread messages</span>
        </us-tag>
    </us-button>
</div>

1
2
3
4
5
6
7
8

# Size

Tags scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

<div>
  <h2>Example heading <us-tag>New</us-tag></h2>
  <h3>Example heading <us-tag>New</us-tag></h3>
  <h4>Example heading <us-tag>New</us-tag></h4>
  <h5>Example heading <us-tag>New</us-tag></h5>
  <h6>Example heading <us-tag>New</us-tag></h6>
</div>

1
2
3
4
5
6
7

# Contextual variants

Primary Secondary Success Danger Warning Info Light Dark

<div> 
  <us-tag variant="primary">Primary</us-tag>
  <us-tag variant="secondary">Secondary</us-tag>
  <us-tag variant="success">Success</us-tag>
  <us-tag variant="danger">Danger</us-tag>
  <us-tag variant="warning">Warning</us-tag>
  <us-tag variant="info">Info</us-tag>
  <us-tag variant="light">Light</us-tag>
  <us-tag variant="dark">Dark</us-tag>
</div>

1
2
3
4
5
6
7
8
9
10

# Pills

Use the pill prop to make tags more rounded (with a larger border-radius and additional horizontal padding).

Primary Secondary Success Danger Warning Info Light Dark

<div> 
  <us-tag variant="primary">Primary</us-tag>
  <us-tag variant="secondary">Secondary</us-tag>
  <us-tag variant="success">Success</us-tag>
  <us-tag variant="danger">Danger</us-tag>
  <us-tag variant="warning">Warning</us-tag>
  <us-tag variant="info">Info</us-tag>
  <us-tag variant="light">Light</us-tag>
  <us-tag variant="dark">Dark</us-tag>
</div>

1
2
3
4
5
6
7
8
9
10

← Tabs Forms Overview →