1. Home
  2. Components
  3. Tags

Tags

tag for adding context about any content

Advanced CardButtons Extended

Labels are used to provide additional information about something.

Default Tag

Use the .tag class, followed by.tag-defaultclass within element to create default tag.

Default Tag

Primary Tag

Use the .tag class, followed by.tag-primaryclass within element to create primary tag.

Primary Tag

Success Tag

Use the .tag class, followed by.tag-successclass within element to create success tag.

Success Tag

Danger Tag

Use the .tag class, followed by.tag-dangerclass within element to create danger tag.

Danger Tag

Info Tag

Use the .tag class, followed by.tag-infoclass within element to create info tag.

Info Tag

Warning Tag

Use the .tag class, followed by.tag-warningclass within element to create warning tag.

Warning Tag

Custom Brown Color Tag

Use the .tag class, followed by.bg-brownclass within element to create brown tag.

Custom Brown Color Tag

Custom Blue Grey Color Tag

Use the .tag class, followed by.bg-blue-greyclass within element to create blue grey tag.

Custom Blue Grey Color Tag

Tags with Icons

Default Tag with Icon

Use the .tag class, followed by.tag-defaultclass within element to create default tag.

Default Tag

Square Primary Tag with Icon

Use the .tag class, followed by.tag-square class for square bordered tag.

Primary Tag

Round Success Tag with Icon

Use the .tag class, followed by.round class for round bordered tag.

Success Tag

Danger Tag with Icon

Use the .tag class, followed by.tag-dangerclass within element to create danger tag.

Danger Tag

Square Info Tag with Icon

Use the .tag class, followed by.tag-squareclass for square tag.

Info Tag

Round Warning Tag with Icon

Use the .tag class, followed by.round class for round bordered.

Warning Tag

Tags with Only Icons

Default Icon Tag

Use the .tag class, followed by.tag-defaultclass within element to create default tag.

Square Icon Tag

Use the .tag class, followed by.tag-squareclass to square bordered tag.

Round Icon Tag

Use the .tag class, followed by.round class for round warning tag.

Danger Icon Tag

Use the .tag class, followed by.tag-dangerclass within element to create danger tag.

Square Icon Tag

Use the .tag class, followed by.tag-square class to square bordered tag.

Round Icon Tag

Use the .tag class, followed by.round class for round warning tag.

Bordered Tags

Use the .tag-bordered with class .tag. Also use .border-COLOR class to add border and use .COLOR for text color

Primary Tag

Primary Tag

Success Tag

Success Tag

Danger Tag

Danger Tag

Info Tag

Info Tag

Warning Tag

Warning Tag

Custom Color Tag

Custom Color Tag

Bordered Tags with Icons

Default Primary Tag

Primary Tag

Square Success Tag

Success Tag

Round Danger Tag

Danger Tag

Default Info Tag

Info Tag

Square Warning Tag

Warning Tag

Round Custom Tag

Custom Color Tag

Bordered Icon tags

Default Primary Tag

Square Success Tag

Round Danger Tag

Default Info Tag

Square Warning Tag

Round Custom Tag

Striped Tags

Use the .tag-striped with class .tag for striped styled tags. Also use .border-left-COLOR or .border-right-COLOR class to add border to left and right.

Primary Tag

Primary Tag

Success Tag

Success Tag

Danger Tag

Danger Tag

Info Tag

Info Tag

Warning Tag

Warning Tag

Custom Color Tag

Custom Color Tag

Striped Tags With Icons

Primary Tag

Primary Tag

Success Tag

Success Tag

Danger Tag

Danger Tag

Info Tag

Info Tag

Warning Tag

Warning Tag

Custom Color Tag

Custom Color Tag

Bordered Icon tags

Default Primary Tag

Square Success Tag

Round Danger Tag

Default Info Tag

Square Warning Tag

Round Custom Tag

Tags With Dropdown

Default Tag

Dropdown Tag
Action Another action Something else here
Separated link

Primary Tag

Dropdown Tag
Action Another action Something else here
Separated link

Success Tag

Action Another action Something else here
Separated link

Danger Tag

Dropdown Tag
Action Another action Something else here
Separated link

Info Tag

Dropdown Tag
Action Another action Something else here
Separated link

Warning Tag

Action Another action Something else here
Separated link

Custom Striped Tag

Dropdown Tag
Action Another action Something else here
Separated link

Custom Right Striped Tag

Dropdown Tag
Action Another action Something else here
Separated link

Custom Round Tag

Action Another action Something else here
Separated link

Block Tags

Use .block class with .tag, to set block tag.

Default Tag

Link Tag

Primary Tag

Link Tag

Success Tag

Danger Tag

Link Tag

Info Tag

Link Tag

Warning Tag

Custom Striped Tag

Link Tag

Custom Right Striped Tag

Link Tag

Custom Round Tag