Badge (badge)
A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| label | Label | ||
| url | URL |
|
id: badge
label: Badge
description: 'A small count and labeling component. Badges scale to match the size of the immediate parent element by using relative font sizing and em units. '
homepage: 'https://getbootstrap.com/docs/4.6/components/badge/'
variants:
primary:
id: primary
label: Primary
secondary:
id: secondary
label: Secondary
success:
id: success
label: Success
danger:
id: danger
label: Danger
warning:
id: warning
label: Warning
info:
id: info
label: Info
light:
id: light
label: Light
dark:
id: dark
label: Dark
pill__primary:
id: pill__primary
label: 'Pill Primary'
pill___secondary:
id: pill___secondary
label: 'Pill Secondary'
pill__success:
id: pill__success
label: 'Pill Success'
pill__danger:
id: pill__danger
label: 'Pill Danger'
pill__warning:
id: pill__warning
label: 'Pill Warning'
pill__info:
id: pill__info
label: 'Pill Info'
pill__light:
id: pill__light
label: 'Pill Light'
pill__dark:
id: pill__dark
label: 'Pill Dark'
link__primary:
id: link__primary
label: 'Link Primary'
slots:
label:
id: label
label: Label
props:
url:
id: url
label: URL
schema:
type: string
format: uri-reference
examples:
preview:
id: preview
label: Preview
renderable:
'@component': badge
label: New