Tags

Tags are used to highlight specific bits of information and warnings.

Default

By default tags have 22px height and have a filled background.

Default Red Yellow Green Blue Purple Disabled 

<span class="sui-tag">Default</span>

<span class="sui-tag sui-tag-red">Red</span>
<span class="sui-tag sui-tag-yellow">Yellow</span>
<span class="sui-tag sui-tag-green">Green</span>
<span class="sui-tag sui-tag-blue">Blue</span>
<span class="sui-tag sui-tag-purple">Purple</span>

<span class="sui-tag sui-tag-disabled">Disabled</span>

Small

When you need an 18px height tag, you can make use of sui-tag-sm extra class.

Default Red Yellow Green Blue Purple Disabled 

<span class="sui-tag sui-tag-sm">Default</span>

<span class="sui-tag sui-tag-red sui-tag-sm">Red</span>
<span class="sui-tag sui-tag-yellow sui-tag-sm">Yellow</span>
<span class="sui-tag sui-tag-green sui-tag-sm">Green</span>
<span class="sui-tag sui-tag-blue sui-tag-sm">Blue</span>
<span class="sui-tag sui-tag-purple sui-tag-sm">Purple</span>

<span class="sui-tag sui-tag-disabled sui-tag-sm">Disabled</span>

Mini

Mini sized tags are reserved for pro and beta tags, commonly used to highlight special features on a plugin.

Pro Beta 

<span class="sui-tag sui-tag-pro">Pro</span>
<span class="sui-tag sui-tag-beta">Beta</span>

Ghost

Some designs will require outlined tags, for those cases you just need to include sui-tag-ghost extra class.

Red Yellow Green Blue Purple 

<span class="sui-tag sui-tag-red sui-tag-ghost">Red</span>
<span class="sui-tag sui-tag-yellow sui-tag-ghost">Yellow</span>
<span class="sui-tag sui-tag-green sui-tag-ghost">Green</span>
<span class="sui-tag sui-tag-blue sui-tag-ghost">Blue</span>
<span class="sui-tag sui-tag-purple sui-tag-ghost">Purple</span>

Uppercase

Some tags require to have uppercase text, just include sui-tag-uppercase extra class.

Blue Blue Blue Blue 

<span class="sui-tag sui-tag-uppercase">Default</span>

Truncated Text

By default tags are multi-line, this mean height of the tag will adjust depending on the amount of text and its width. But there are times when you will need to truncate text inside tag instead using multi-line text, for those cases include sui-tag-truncated extra class.

Multiple line tag Truncated tag 

<!-- Multi line tag -->
<span class="sui-tag">Default</span>

<!-- Truncated tag -->
<span class="sui-tag sui-tag-truncated">
	<span>Default</span>
</span>