@lit-element-bootstrap/badge v1.0.0

@lit-element-bootstrap/badge

An implementation of Bootstrap v4.3.1 alert components in LitElement.

Live demo

Go to live demo

Installation

Install via npm:

npm install @lit-element-bootstrap/badge

Install via yarn:

yarn add @lit-element-bootstrap/badge

Install via unpkg:

https://unpkg.com/@lit-element-bootstrap/badge@latest/unpkg/index.bundled.js

Import

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

Theming

bs-badge

bs-badge-link