Badges

Small count and labeling component.

How To

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" />

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

<Division Class="ThemeHeaderSmallest text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeaderSmaller text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeaderSmall text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeader text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeaderLarge text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeaderLarger text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>
<Division Class="ThemeHeaderLargest text-left" HtmlDiv="True">
  <Label Caption="..." />
  <Spaces />
  <Label Caption="New" Class="badge badge-secondary" />
</Division>

Link Badge

Highlight text within controls, list items and more.

Inbox 42

<Division ID="btnLinkBadge">
  <Label Caption="Inbox" />
  <Spaces />
  <Label Caption="42" Class="badge badge-secondary" />
  <Action ID="actJS" Javascript="void(0)" Type="Javascript" />
</Division>

Messages

Messages 4

<Division ID="btnLinkBadge" Class="btn btn-primary">
  <Label Caption="Messages" />
  <Spaces />
  <Label Class="badge" Caption="4" />
  <Action Type="Javascript" ID="actJS" Javascript="void(0)" />
</Division>

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

<Label Caption="Secondary" Class="badge badge-secondary" />
<Label Caption="Primary" Class="badge badge-primary" />
<Label Caption="Success" Class="badge badge-success" />
<Label Caption="Info" Class="badge badge-info" />
<Label Caption="Warning" Class="badge badge-warning" />
<Label Caption="Danger" Class="badge badge-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

<Label Caption="Secondary" Class="badge badge-pill badge-secondary" />
<Label Caption="Primary" Class="badge badge-pill badge-primary" />
<Label Caption="Success" Class="badge badge-pill badge-success" />
<Label Caption="Info" Class="badge badge-pill badge-info" />
<Label Caption="Warning" Class="badge badge-pill badge-warning" />
<Label Caption="Danger" Class="badge badge-pill badge-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

<DataList Class="list-group" ID="listGroupBadges" Ordered="False">
  <DataLayer ID="dlListGroupBadges" Type="Static">
    <StaticDataRow badgeLabel="1" caption="..." />
  </DataLayer>
  <ListItem Class="list-group-item d-block">
    <Label Caption="[at]Data.badgeLabel[tilde]" Class="badge badge-secondary float-right" />
    <Label Caption="[at]Data.caption[tilde]" />
  </ListItem>
</DataList>