Tag

Usage

See design usage guidelines

Tags are essentially labels or keywords used to categorize, filter, or group content. Tags provide a flexible way to associate items with multiple categories or attributes, facilitating easier search, filtering, and organization. Tags are labels or keywords assigned to specific items, elements, or pieces of content to categorize and organize them based on shared characteristics or topics. Tags serve as metadata that helps users and designers quickly locate, filter, and group related items, enhancing content discoverability and navigation.

Default

pencil-edit This is a tag

<span class="tag"><span class="u-icon">pencil-edit</span> This is a tag</span>

Disabled

pencil-edit This is a disabled tag

<span class="tag disabled"><span class="u-icon">pencil-edit</span> This is a disabled tag</span>

Shape

pencil-edit This is a default shape tagpencil-edit This is a small shape tagpencil-edit This is a full shape tag

<span class="tag"><span class="u-icon">pencil-edit</span> This is a default shape tag</span>
<span class="tag tag-small"><span class="u-icon">pencil-edit</span> This is a small shape tag</span>
<span class="tag tag-full"><span class="u-icon">pencil-edit</span> This is a full shape tag</span>

Usage Guidelines