Tag

Component status:Ready

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 href="#">Tag title enabled</a>
  </li>
  <li>
    <a role="link" aria-disabled="true">Tag title disabled</a>
  </li>
</ul>

{#
Buckeye UX - version 1.1.0
Copyright (C) 2025 The Ohio State University
#}

<ul class='bux-tag'>
	{% for item in tag_items %}
		<li>
			{% if item.disabled == 'true' %}
			<a role="link" aria-disabled="true">{{- item.text -}}</a>
			{% else %}
			<a href="{{- item.url -}}">{{- item.text -}}</a>
			{% 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.