Back to the list

Tag

Tags can be used to display information.

File to include

@import "components/tag";

Rounded

Tag Tag Tag Tag Tag Tag Tag Tag 
<span class="tag" data-color="primary" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="secondary" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="success" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="danger" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="warning" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="gray" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="black" data-tag-style="rounded">Tag</span>
<span class="tag" data-color="white" data-tag-style="rounded">Tag</span>

Pill

Tag Tag Tag Tag Tag Tag Tag Tag 
<span class="tag" data-color="primary" data-tag-style="pill">Tag</span>
<span class="tag" data-color="secondary" data-tag-style="pill">Tag</span>
<span class="tag" data-color="success" data-tag-style="pill">Tag</span>
<span class="tag" data-color="danger" data-tag-style="pill">Tag</span>
<span class="tag" data-color="warning" data-tag-style="pill">Tag</span>
<span class="tag" data-color="gray" data-tag-style="pill">Tag</span>
<span class="tag" data-color="black" data-tag-style="pill">Tag</span>
<span class="tag" data-color="white" data-tag-style="pill">Tag</span>

Attributes

Name Example value Possible values Default Required
data-tag-style pill "rounded" | "pill" rounded No
data-color warning "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white" primary No