Tags

Tags are an interactive, community-generated keyword that allow communities to label, organize, and discover related content. Tags are maintained by their respective communities.

Classes

Class	Description	Parent	Modifies
`.s-tag`	Base tag style that is used almost universally.	N/A	N/A
`.s-tag--dismiss`	For a clear or dismiss action icon. When using this element, it should be rendered as a `button` containing the icon and the parent `.s-tag` should be rendered as a `span` element.	`.s-tag`	N/A
`.s-tag--sponsor`	Correctly positions a tag's sponsor logo.	`.s-tag`	N/A
`.s-tag__moderator`	Exclusively used within Meta communities by moderators (and employees) to assign unique statuses to questions.	N/A	`.s-tag`
`.s-tag__required`	Exclusively used within Meta communities to denote the post type. One of these tags are required on all Meta posts.	N/A	`.s-tag`
`.s-tag__ignored`	Prepends an icon to indicate the tag is ignored.	N/A	`.s-tag`
`.s-tag__watched`	Prepends an icon to indicate the tag is watched.	N/A	`.s-tag`
`.s-tag__sm`	Apply a small size to the tag.	N/A	`.s-tag`
`.s-tag__lg`	Apply a large size to the tag.	N/A	`.s-tag`

Accessibility

Tags should be focusable and navigable with the keyboard. The various tag states (Required, Moderator, Watched, Ignored) are visually distinct but do not include any text indicators for screen readers. For that reason it is recommended to provide additional context using hidden text elements with the v-visible-sr class.

Examples

Default tag

<a class="s-tag" href="#">…</a>
<span class="s-tag">… <button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss … tag</span>…</button></span>
<a class="s-tag" href="…"><img class="s-tag--sponsor" src="…"> … <div class="v-visible-sr">Sponsored tag</div></a>
<span class="s-tag">
    <a href="…">…</a>
    <button class="s-tag--dismiss"><span class="v-visible-sr">Dismiss … tag</span>…</button>
</span>

jquery javascript android

Moderator

<a class="s-tag s-tag__moderator" href="#">status-completed <div class="v-visible-sr">Moderator tag</div></a>
<span class="s-tag s-tag__moderator">status-bydesign <div class="v-visible-sr">Moderator tag</div><button class="s-tag--dismiss">…</button></span>
<a class="s-tag s-tag__moderator" href="#">status-planned <div class="v-visible-sr">Moderator tag</div></a>

status-completed

Moderator tag

status-bydesign

Moderator tag

status-planned

Moderator tag

Required

<a class="s-tag s-tag__required" href="#">discussion <div class="v-visible-sr">Required tag</div></a>
<span class="s-tag s-tag__required">feature-request <div class="v-visible-sr">Required tag</div><button class="s-tag--dismiss">…</button></span>
<a class="s-tag s-tag__required" href="#">bug <div class="v-visible-sr">Required tag</div></a>

discussion

Required tag

feature-request

Required tag

bug

Required tag

Watched

<a class="s-tag s-tag__watched" href="#">asp-net <div class="v-visible-sr">Watched tag</div></a>

asp-net

Watched tag

Ignored

<a class="s-tag s-tag__ignored" href="#">netscape <div class="v-visible-sr">Ignored tag</div></a>

netscape

Ignored tag

Sizes

<a class="s-tag s-tag__sm" href="#">css</a>
<a class="s-tag" href="#">css</a>
<a class="s-tag s-tag__lg" href="#">css</a>

Example	Modifier class	Description
css	`.s-tag__sm`	Apply a small size to the tag.
css	N/A	The default tag size.
css	`.s-tag__lg`	Apply a large size to the tag.