Badges

Small count and labeling component.

How To

  1. Step 1: Include LambdaEx Framework in Logi Info Application. Include LambdaEx Framework in Logi Info Application.

Simple Example

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

Logi XML
<Label Caption="..." Class="badge" />
<Label Caption="..." Class="badge" />
Example
Badge Sizing

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Link Badge

Highlight text within controls, list items and more.

Inbox 42
Messages
Contextual variations or labels

Add any of the below mentioned modifier classes to change the appearance of a badge.

Secondary  Primary  Success  Info  Warning  Danger
Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Secondary  Primary  Success  Info  Warning  Danger
List Group Badges

Add the badges component to any list group item and it will automatically be positioned on the right.

  • 1List Item One
  • 2List Item Two
  • 3List Item Three
  • 4List Item Four