Logo

Base Examples

Default label examples.

1 2 5 9 10
<span class="label">1</span>

Rounded label examples.

1 2 5 9 10
<span class="label label-rounded">10</span>

Square label examples.

1 2 5 9 10
<span class="label label-square">10</span>

Inline label examples.

Pending Done Sent In process
<span class="label label-inline">Pending</span>

Pill label examples.

Pending Done Sent In process
<span class="label label-pill label-inline">10</span>

Contextual Examples

Solid style

3 12 5 11 New Pending Done In process

                        <span class="label label-rounded label-success mr-2">3</span>
                        <span class="label label-rounded label-primary mr-2">12</span>
                        <span class="label label-danger mr-2">5</span>
                        <span class="label label-warning mr-2">11</span>
                        <span class="label label-danger label-pill label-inline mr-2">New</span>
                        <span class="label label-warning label-pill label-inline mr-2">Pending</span>
                        <span class="label label-dark label-inline mr-2">Done</span>
                        <span class="label label-info label-inline mr-2">In process</span>
                        

Outline style

3 12 5 11 New Pending Done In process

                        <span class="label label-rounded label-success mr-2">3</span>
                        <span class="label label-rounded label-primary mr-2">12</span>
                        <span class="label label-danger mr-2">5</span>
                        <span class="label label-warning mr-2">11</span>
                        <span class="label label-danger label-pill label-inline mr-2">New</span>
                        <span class="label label-warning label-pill label-inline mr-2">Pending</span>
                        <span class="label label-dark label-inline mr-2">Done</span>
                        <span class="label label-info label-inline mr-2">In process</span>
                        

Light style

3 12 5 11 New Pending Done In process

                        <span class="label label-rounded label-success mr-2">3</span>
                        <span class="label label-rounded label-primary mr-2">12</span>
                        <span class="label label-danger mr-2">5</span>
                        <span class="label label-warning mr-2">11</span>
                        <span class="label label-danger label-pill label-inline mr-2">New</span>
                        <span class="label label-warning label-pill label-inline mr-2">Pending</span>
                        <span class="label label-dark label-inline mr-2">Done</span>
                        <span class="label label-info label-inline mr-2">In process</span>
                        

Font Weight

Set font weight using .font-weight-{lighter|light|normal|bold|bolder|boldest} class.

Lighter Light Normal Bold Bolder Boldest

                        <span class="label label-primary label-inline font-weight-lighter mr-2">Lighter</span>
                        <span class="label label-primary label-inline font-weight-light mr-2">Light</span>
                        <span class="label label-primary label-inline font-weight-normal mr-2">Normal</span>
                        <span class="label label-primary label-inline font-weight-bold mr-2">Bold</span>
                        <span class="label label-primary label-inline font-weight-bolder mr-2">Bolder</span>
                        <span class="label label-primary label-inline font-weight-boldest mr-2">Boldest</span>
                        

Sizes

Label size options

3 12 5 11 New Pending Done In process
3 12 5 11 New Pending Done In process
3 12 5 11 New Pending Done In process
3 12 5 11 New Pending Done In process
<span class="label label-sm label-rounded label-success">3</span>
<span class="label label-md font-weight-bold label-rounded label-success">3</span>
<span class="label label-lg font-weight-bolder label-rounded label-success">3</span>
<span class="label label-xl font-weight-boldest label-rounded label-success">3</span>

Dot Style

Font weight options

Dot label style example

Dot label style example

Dot label style example

Dot label style example

<span class="label label-dot label-success"></span>

Dot label style <span class="label label-dot label-success"></span> example

Using In Buttons

Font weight options

<button class="btn font-weight-bold btn-primary mr-2">Button label <span class="label label-sm label-white ml-2">5</span></button>
<button class="btn font-weight-bold btn-light-success mr-2">Button label <span class="label label-danger ml-2">5</span></button>
<button class="btn font-weight-bold btn-lg btn-outline-danger">Button label <span class="label label-lg label-warning ml-2">5</span></button>

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo