Uimini

# Tag

Use tag for markup or categorizing.

# Basic

For articles, cards, etc.

vue react angular
<div class="ui-button-group">
  <span class="ui-tag">vue</span>
  <span class="ui-tag">react</span>
  <span class="ui-tag">angular</span>
</div>

# Box

For categorizing, buttons, etc.

vue react angular
<div class="ui-button-group">
  <span class="ui-tag isBox">vue</span>
  <span class="ui-tag isBox">react</span>
  <span class="ui-tag isBox">angular</span>
</div>

# Custom:

Preset a series of colorful tag styles for use in different situations.

#ccfbe5 #ffdd9a #ffd3ce #ded6ff
<div class="ui-button-group">
  <span class="ui-tag isBox" style="background-color: #ccfbe5;">#ccfbe5</span>
  <span class="ui-tag isBox" style="background-color: #ffdd9a;">#ffdd9a</span>
  <span class="ui-tag isBox" style="background-color: #ffd3ce;">#ffd3ce</span>
  <span class="ui-tag isBox" style="background-color: #ded6ff;">#ded6ff</span>
</div>

# With icons:

Add <svg> or <img> inside tag.

Twitter YouTube Facebook 
<div class="ui-button-group">
  <span class="ui-tag isBox" style="background-color: #55acee; color: white;">
    <!-- <svg> or <img> is here -->
    Twitter
  </span>
  <span class="ui-tag isBox" style="background-color: #cd201f; color: white;">
    <!-- <svg> or <img> is here -->
    YouTube
  </span>
  <span class="ui-tag isBox" style="background-color: #3b5999; color: white;">
    <!-- <svg> or <img> is here -->
    Facebook
  </span>
</div>

# Active status

For display active tag.

# For default tag:

Active tag for default view combine with vertical ui-button-group.

vue react (active) angular

# For box tag:

Active tag for box view combine with vertical and inline ui-button-group.

Use isActive class for apply it.

vue react angular
<div class="ui-button-group isVertical" style="margin-bottom: 0.8rem;">
  <span class="ui-tag">vue</span>
  <span class="ui-tag isActive">react (active)</span>
  <span class="ui-tag">angular</span>
</div>
<div class="ui-button-group isVertical isInline">
  <span class="ui-tag isBox">vue</span>
  <span class="ui-tag isBox isActive">react</span>
  <span class="ui-tag isBox">angular</span>
</div>

# Disabled status

Disable status for tag. Also can combine with isActive tag.

Use isDisabled class for apply it.

Disabled Disabled Disabled and active Default Default
<div class="ui-button-group">
  <span class="ui-tag isBox isDisabled">Disabled</span>
  <span class="ui-tag isBox isDisabled">Disabled</span>
  <span class="ui-tag isBox isDisabled isActive">Disabled and active</span>
  <span class="ui-tag isBox">Default</span>
  <span class="ui-tag isBox">Default</span>
</div>

← Card →