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 class="bux-tag__link" rel="noopener" role="link" aria-disabled="true">
      <span class="bux-tag__link__text">Tag title disabled</span>
    </a>
  </li>
</ul>

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

<ul class='bux-tag'>
    {% set show_underline = false %}
	{% for item in tag_items %}
		<li>
			{% if item.disabled == 'true' %}
                {% include '@link' with {
                    base_class: 'bux-tag__link',
                    link_text: item.text,
                    attributes: {
                        role: 'link',
                        'aria-disabled': 'true'
                    }
                } %}
			{% else %}
                {% include base_path ~ directory ~ bux ~ '/twig/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.