@lit-element-bootstrap/badge
An implementation of Bootstrap v4.3.1 alert components in LitElement.
Live demo
Installation
Install via npm:
npm install @lit-element-bootstrap/badgeInstall via yarn:
yarn add @lit-element-bootstrap/badgeInstall via unpkg:
https://unpkg.com/@lit-element-bootstrap/badge@latest/unpkg/index.bundled.jsImport
import all modules:
import '@lit-element-bootstrap/badge';import specific module (preferred):
import '@lit-element-bootstrap/badge/bs-badge.js';import specific class:
// import specific class from all modules
import { BsBadge } from '@lit-element-bootstrap/badge';
// import specific class
import { BsBadge } from '@lit-element-bootstrap/badge/bs-badge.js';Examples
Badge inside a heading
<h1>Example heading <bs-badge context="secondary">New</bs-badge></h1>
<h2>Example heading <bs-badge context="secondary">New</bs-badge></h2>
<h3>Example heading <bs-badge context="secondary">New</bs-badge></h3>
<h4>Example heading <bs-badge context="secondary">New</bs-badge></h4>
<h5>Example heading <bs-badge context="secondary">New</bs-badge></h5>
<h6>Example heading <bs-badge context="secondary">New</bs-badge></h6>
Badge inside a button
<bs-button primary> Notifications
<bs-badge context="light">4</bs-badge>
</bs-button>
Badges in context
<span><bs-badge context="primary">Primary</bs-badge></span>
<span><bs-badge context="secondary">Seconday</bs-badge></span>
<span><bs-badge context="success">Success</bs-badge></span>
<span><bs-badge context="info">Info</bs-badge></span>
<span><bs-badge context="warning">Warining</bs-badge></span>
<span><bs-badge context="danger">Danger</bs-badge></span>
<span><bs-badge context="light">Light</bs-badge></span>
<span><bs-badge context="dark">Dark</bs-badge></span>
Badges as pills in context
<span><bs-badge pill context="primary">Primary</bs-badge></span>
<span><bs-badge pill context="secondary">Seconday</bs-badge></span>
<span><bs-badge pill context="success">Success</bs-badge></span>
<span><bs-badge pill context="info">Info</bs-badge></span>
<span><bs-badge pill context="warning">Warining</bs-badge></span>
<span><bs-badge pill context="danger">Danger</bs-badge></span>
<span><bs-badge pill context="light">Light</bs-badge></span>
<span><bs-badge pill context="dark">Dark</bs-badge></span>
Badge links in context
<bs-badge-link context="primary">Primary</bs-badge-link>
<bs-badge-link context="secondary">Secondary</bs-badge-link>
<bs-badge-link context="success">Success</bs-badge-link>
<bs-badge-link context="info">Info</bs-badge-link>
<bs-badge-link context="warning">Warning</bs-badge-link>
<bs-badge-link context="danger">Danger</bs-badge-link>
<bs-badge-link context="light">Light</bs-badge-link>
<bs-badge-link context="dark">Dark</bs-badge-link>
Components
| Tag | Class |
|---|---|
<bs-badge> |
BsBadge |
<bs-badge-link> |
BsBadgeLink |
Theming
bs-badge
| Property | Default value | Description |
|---|---|---|
| --badge-color | user agent | Text color |
| --badge-bg-color | user agent | Background color |
| --badge-pd-top | 0.25em | Padding top |
| --badge-pd-bottom | 0.25em | Padding bottom |
| --badge-pd-left | 0.4em | Padding left |
| --badge-pd-right | 0.4em | Padding right |
| --badge-font-size | 75% | Font size |
| --badge-font-wg | 700 | Font weight |
| --badge-line-hg | 1 | Line height |
| --badge-text-align | center | Badge text align |
| --badge-bd-radius | 0.25rem | Border radius |
| --badge-pill-pd-top | 0.6em | Pill padding top |
| --badge-pill-pd-left | 0.6em | Pill padding left |
| --badge-pill-bd-radius | 10rem | Pill border radius |
| --badge-primary-color | #fff | Primary context text color |
| --badge-primary-bg-color | #007bff | Primary context background color |
| --badge-secondary-color | #fff | Secondary context text color |
| --badge-secondary-bg-color | #6c757d | Secondary context background color |
| --badge-success-color | #fff | Success context text color |
| --badge-success-bg-color | #28a745 | Success context background color |
| --badge-info-color | #fff | Info context text color |
| --badge-info-bg-color | #17a2b8 | Info context background color |
| --badge-warning-color | #212529 | Wrning context text color |
| --badge-warning-bg-color | #ffc107 | Warning context background color |
| --badge-danger-color | #fff | Danger context text color |
| --badge-danger-bg-color | #dc3545 | Danger context background color |
| --badge-light-color | #212529 | Light context text color |
| --badge-light-bg-color | #f8f9fa | Light context background color |
| --badge-dark-color | #fff | Dark context text color |
| --badge-dark-bg-color | #343a40 | Dark context background color |
bs-badge-link
| Property | Default value | Description |
|---|---|---|
| --badge-link-color | #007bff | Text color |
| --badge-link-bg-color | transparent | Background color |
| --badge-link-pd-top | 0.25em | Padding top |
| --badge-link-pd-bottom | 0.25em | Padding bottom |
| --badge-link-pd-left | 0.4em | Padding left |
| --badge-link-pd-right | 0.4em | Padding right |
| --badge-link-font-size | 75% | Font size |
| --badge-link-font-wg | 700 | Font weight |
| --badge-link-line-hg | 1 | Line height |
| --badge-link-text-align | center | Text align |
| --badge-link-bd-radius | 0.25rem | Border radius |
| --badge-link-pill-pd-top | 0.6em | Pill padding right |
| --badge-link-pill-pd-left | 0.6em | Pill padding left |
| --badge-link-pill-bd-radius | 10rem | Pill border radius |
| --badge-link-primary-color | #fff | Primary context text color |
| --badge-link-primary-bg-color | #007bff | Primary context background color |
| --badge-link-primary-text-decoration | none | Primary context text decoration |
| --badge-link-primary-hover-color | #fff | Primary context hover text color |
| --badge-link-primary-hover-bg-color | #0062cc | Primary context hover background color |
| --badge-link-primary-focus-color | #fff | Primary context focus text color |
| --badge-link-primary-focus-bg-color | #0062cc | Primary context focus background color |
| --badge-link-primary-link-outline | 0 | Primary context link outline |
| --badge-link-primary-link-box-shadow | 0 0 0 0.2rem rgba(0, 123, 255, 0.5) | Primary context link box shadow |
| --badge-link-secondary-color | #fff | Secondary context text color |
| --badge-link-secondary-bg-color | #6c757d | Secondary context background color |
| --badge-link-secondary-text-decoration | none | Secondary context text decoration |
| --badge-link-secondary-hover-color | #fff | Secondary context hover text color |
| --badge-link-secondary-hover-bg-color | #545b62 | Secondary context hover background color |
| --badge-link-secondary-focus-color | #fff | Secondary context focus text color |
| --badge-link-secondary-focus-bg-color | #545b62 | Secondary context focus background color |
| --badge-link-secondary-link-outline | 0 | Secondary context link outline |
| --badge-link-secondary-link-box-shadow | 0 0 0 0.2rem rgba(108, 117, 125, 0.5) | Secondary context link box shadow |
| --badge-link-success-color | #fff | Success context text color |
| --badge-link-success-bg-color | #28a745 | Success context background color |
| --badge-link-success-text-decoration | none | Success context text decoration |
| --badge-link-success-hover-color | #fff | Success context hover text color |
| --badge-link-success-hover-bg-color | #1e7e34 | Success context hover background color |
| --badge-link-success-focus-color | #fff | Success context focus text color |
| --badge-link-success-focus-bg-color | #1e7e34 | Success context focus background color |
| --badge-link-success-link-outline | 0 | Success context link outline |
| --badge-link-success-link-box-shadow | 0 0 0 0.2rem rgba(40, 167, 69, 0.5) | Success context link box shadow |
| --badge-link-info-color | #fff | Info context text color |
| --badge-link-info-bg-color | #17a2b8 | Info context background color |
| --badge-link-info-text-decoration | none | Info context text decoration |
| --badge-link-info-hover-color | #fff | Info context hover text color |
| --badge-link-info-hover-bg-color | #117a8b | Info context hover background color |
| --badge-link-info-focus-color | #fff | Info context focus text color |
| --badge-link-info-focus-bg-color | #117a8b | Info context focus background color |
| --badge-link-info-link-outline | 0 | Info context link outline |
| --badge-link-info-link-box-shadow | 0 0 0 0.2rem rgba(23, 162, 184, 0.5) | Info context link box shadow |
| --badge-link-warning-color | #212529 | Warning context text color |
| --badge-link-warning-bg-color | #ffc107 | Warning context background color |
| --badge-link-warning-text-decoration | none | Warning context text decoration |
| --badge-link-warning-hover-color | #212529 | Warning context hover text color |
| --badge-link-warning-hover-bg-color | #d39e00 | Warning context hover background color |
| --badge-link-warning-focus-color | #212529 | Warning context focus text color |
| --badge-link-warning-focus-bg-color | #d39e00 | Warning context focus background color |
| --badge-link-warning-link-outline | 0 | Warning context link outline |
| --badge-link-warning-link-box-shadow | 0 0 0 0.2rem rgba(255, 193, 7, 0.5) | Warning context link box shadow |
| --badge-link-danger-color | #fff | Danger context text color |
| --badge-link-danger-bg-color | #dc3545 | Danger context background color |
| --badge-link-danger-text-decoration | none | Danger context text decoration |
| --badge-link-danger-hover-color | #fff | Danger context hover text color |
| --badge-link-danger-hover-bg-color | #bd2130 | Danger context hover background color |
| --badge-link-danger-focus-color | #fff | Danger context focus text color |
| --badge-link-danger-focus-bg-color | #bd2130 | Danger context focus background color |
| --badge-link-danger-link-outline | 0 | Danger context link outline |
| --badge-link-danger-link-box-shadow | 0 0 0 0.2rem rgba(220, 53, 69, 0.5) | Danger context link box shadow |
| --badge-link-light-color | #212529 | Light context text color |
| --badge-link-light-bg-color | #f8f9fa | Light context background color |
| --badge-link-light-text-decoration | none | Light context text decoration |
| --badge-link-light-hover-color | #212529 | Light context hover text color |
| --badge-link-light-hover-bg-color | #dae0e5 | Light context hover background color |
| --badge-link-light-focus-color | #212529 | Light context focus text color |
| --badge-link-light-focus-bg-color | #dae0e5 | Light context focus background color |
| --badge-link-light-link-outline | 0 | Light context link outline |
| --badge-link-light-link-box-shadow | 0 0 0 0.2rem rgba(248, 249, 250, 0.5) | Light context link box shadow |
| --badge-link-dark-color | #fff | Dark context text color |
| --badge-link-dark-bg-color | #f8f9fa | Dark context background color |
| --badge-link-dark-text-decoration | none | Dark context text decoration |
| --badge-link-dark-hover-color | #fff | Dark context hover text color |
| --badge-link-dark-hover-bg-color | #1d2124 | Dark context hover background color |
| --badge-link-dark-focus-color | #fff | Dark context focus text color |
| --badge-link-dark-focus-bg-color | #1d2124 | Dark context focus background color |
| --badge-link-dark-link-outline | 0 | Dark context link outline |
| --badge-link-dark-link-box-shadow | 0 0 0 0.2rem rgba(52, 58, 64, 0.5) | Dark context link box shadow |