Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Custom Label component for count and labeling purposes.

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>

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9