Badge
Also see /react/badge
React component
The .bf-badge will apply colorless badge styling, combine it with css color
classes. The default color is .bfc-theme-fade-bg.
It's meant to be used on an inline element like <span>:
State colors
<span class="bf-badge bfc-theme-fade-bg">Theme</span> <span class="bf-badge bfc-neutral-fade-bg">Neutral</span> <span class="bf-badge bfc-brand-fade-bg">Brand</span> <span class="bf-badge bfc-chill-fade-bg">Chill</span> <span class="bf-badge bfc-attn-fade-bg">Attn</span> <span class="bf-badge bfc-success-fade-bg">Success</span> <span class="bf-badge bfc-warning-fade-bg">Warning</span> <span class="bf-badge bfc-alert-fade-bg">Alert</span><span class="bf-badge bfc-theme-fade-bg">Theme</span> <span class="bf-badge bfc-neutral-fade-bg">Neutral</span> <span class="bf-badge bfc-brand-fade-bg">Brand</span> <span class="bf-badge bfc-chill-fade-bg">Chill</span> <span class="bf-badge bfc-attn-fade-bg">Attn</span> <span class="bf-badge bfc-success-fade-bg">Success</span> <span class="bf-badge bfc-warning-fade-bg">Warning</span> <span class="bf-badge bfc-alert-fade-bg">Alert</span>
Inverted
<span class="bf-badge bfc-theme-bg">Theme</span> <span class="bf-badge bfc-neutral-bg">Neutral</span> <span class="bf-badge bfc-brand-bg">Brand</span> <span class="bf-badge bfc-chill-bg">Chill</span> <span class="bf-badge bfc-attn-bg">Attn</span> <span class="bf-badge bfc-success-bg">Success</span> <span class="bf-badge bfc-warning-bg">Warning</span> <span class="bf-badge bfc-alert-bg">Alert</span><span class="bf-badge bfc-theme-bg">Theme</span> <span class="bf-badge bfc-neutral-bg">Neutral</span> <span class="bf-badge bfc-brand-bg">Brand</span> <span class="bf-badge bfc-chill-bg">Chill</span> <span class="bf-badge bfc-attn-bg">Attn</span> <span class="bf-badge bfc-success-bg">Success</span> <span class="bf-badge bfc-warning-bg">Warning</span> <span class="bf-badge bfc-alert-bg">Alert</span>
Pill (rounded)
The .bf-badge-pill class applies rounded corners and appropriate padding.
<span class="bf-badge bf-badge-pill bfc-theme-bg">Theme</span> <span class="bf-badge bf-badge-pill bfc-neutral-bg">Neutral</span> <span class="bf-badge bf-badge-pill bfc-brand-bg">Brand</span> <span class="bf-badge bf-badge-pill bfc-chill-bg">Chill</span> <span class="bf-badge bf-badge-pill bfc-attn-bg">Attn</span> <span class="bf-badge bf-badge-pill bfc-success-bg">Success</span> <span class="bf-badge bf-badge-pill bfc-warning-bg">Warning</span> <span class="bf-badge bf-badge-pill bfc-alert-bg">Alert</span><span class="bf-badge bf-badge-pill bfc-theme-bg">Theme</span> <span class="bf-badge bf-badge-pill bfc-neutral-bg">Neutral</span> <span class="bf-badge bf-badge-pill bfc-brand-bg">Brand</span> <span class="bf-badge bf-badge-pill bfc-chill-bg">Chill</span> <span class="bf-badge bf-badge-pill bfc-attn-bg">Attn</span> <span class="bf-badge bf-badge-pill bfc-success-bg">Success</span> <span class="bf-badge bf-badge-pill bfc-warning-bg">Warning</span> <span class="bf-badge bf-badge-pill bfc-alert-bg">Alert</span>