Badge Simple component
This component displays a badge containing a text. You can also specify a color. Badges can have rounded or rectangular edges. See the JBStrap showcase for an example.
Supported events:
Show, Hide, Animation, Click, MouseEvents, Scroll, Touch, Drag&Drop
Style customization
| Name | Default value | Derived value | Computed value | Comment |
|---|---|---|---|---|
| $badge-font-size | 100% | 100% | Badge font size. | |
| $badge-font-weight | $font-weight-bold | $badge-font-weight-->$font-weight-bold-->700 | 700 | Badge font weight. |
| $badge-padding-y | 0.25rem | 0.25rem | Badge padding y. | |
| $badge-padding-x | 0.4rem | 0.4rem | Badge padding x. | |
| $badge-border-radius | $border-radius | $badge-border-radius-->$border-radius-->0.25rem | 0.25rem | Badge border radius. |
| $badge-transition | $btn-transition | $badge-transition-->$btn-transition-->color .15s | color .15s | Badge transition. |
| $badge-focus-width | $input-btn-focus-width | $badge-focus-width-->$input-btn-focus-width-->0.2rem | 0.2rem | Badge focus width. |
| $badge-pill-padding-x | 0.6em | 0.6rem | Badge pill padding x. | |
| $badge-pill-border-radius | 10rem | 0.6rem | Badge pill border radius. |