<!-- Default -->
<span class="dso-badge">Default</span>
<!-- Badge Info -->
<span class="dso-badge badge-info">Info</span>
<!-- Badge Primary -->
<span class="dso-badge badge-primary">Primary</span>
<!-- Badge Success -->
<span class="dso-badge badge-success">Success</span>
<!-- Badge Warning -->
<span class="dso-badge badge-warning">Warning</span>
<!-- Badge Danger -->
<span class="dso-badge badge-danger">Danger</span>
<span class="dso-badge{{#if modifier}} badge-{{ modifier }}{{/if}}">{{ label }}</span>
/* Default */
label: Default
/* Badge Info */
label: Info
modifier: info
/* Badge Primary */
label: Primary
modifier: primary
/* Badge Success */
label: Success
modifier: success
/* Badge Warning */
label: Warning
modifier: warning
/* Badge Danger */
label: Danger
modifier: danger
- Handle: @badge
- Variants (6): Default , Badge Info , Badge Primary , Badge Success , Badge Warning , Badge Danger
- Preview:
- Filesystem Path: components\04-indicators\badge\badge.hbs
- Referenced by (8): @anchor, @anchor--download, @anchor--extern, @anchor--icon, @anchor--label, @anchor--iconlabel, @anchor--iconbadge, @anchor--iconlabelbadge
There are no notes for this item.
WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage
This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.
<span class="dso-badge">Default</span>
NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2
Check that the title element describes the document.
<title>Badge