Tag

A tag displays a taxonomy term

A Tag can be a word or phrase. Single or multiple tags can be used to categorize an item. Tags can be used almost anywhere in a UI, but are commonly used within storytelling, news or event content. They are clickable elements that lead to a filtered view of a content type.

Examples

Default

• Tag title enabled
• Tag title disabled

<ul class="bux-tag">
  <li>
    <a class="bux-tag__link" href="#" rel="noopener">
      <span class="bux-tag__link__text">Tag title enabled</span>
    </a>
  </li>
  <li>
    <a role="link" aria-disabled="true" class="bux-tag__link" rel="noopener">
      <span class="bux-tag__link__text">Tag title disabled</span>
    </a>
  </li>
</ul>

{#
Buckeye UX - version 1.5.1
Copyright (C) 2026 The Ohio State University
#}

{#

Tag

Available Variables:
  - tag_items:  Array of tag items: text, url

This DocBlock is auto-generated and any changes could be overwritten.
Use the component's corresponding *.config.ts to make changes to this file.

Last Updated: 04-01-2026 11:14:05
#}

<ul class="bux-tag">
  {% set show_underline = false %}
  {% for item in tag_items %}
    <li>
      {% if item.disabled == 'true' %}
        {% include '@bux/link/link.twig' with {
          base_class: 'bux-tag__link',
          link_text: item.text,
          attributes: {
            role: 'link',
            'aria-disabled': 'true'
          }
        } %}
      {% else %}
        {% include '@bux/link/link.twig' with {
          base_class: 'bux-tag__link',
          link_url: item.url,
          link_text: item.text
        } %}
      {% endif %}
    </li>
  {% endfor %}
</ul>

Usage

Dos

• Write tag titles to be concise, but informative
• Though multiple tags are acceptable, use tags in moderation

Don’ts

• Avoid displaying tags in proximity to buttons. Though the styling of a Button differs from a Tag, users may confuse a Tag with a button.