Badge opacity colors
Badge opacity colors in the range from 0.1 to 0.9.
Primary
Secondary
Success
Info
Warning
Danger
Light
Dark
Black
Indigo
Orange
Pink
Purple
Teal
White
<!-- Source -->
<div class="badge badge-primary-10">Primary</div>
<div class="badge badge-primary-20">Primary</div>
<div class="badge badge-primary-30">Primary</div>
<div class="badge badge-primary-40">Primary</div>
<div class="badge badge-primary-50">Primary</div>
<div class="badge badge-primary-60">Primary</div>
<div class="badge badge-primary-70">Primary</div>
<div class="badge badge-primary-80">Primary</div>
<div class="badge badge-primary-90">Primary</div>
<div class="badge badge-secondary-10">Secondary</div>
<div class="badge badge-secondary-20">Secondary</div>
<div class="badge badge-secondary-30">Secondary</div>
<div class="badge badge-secondary-40">Secondary</div>
<div class="badge badge-secondary-50">Secondary</div>
<div class="badge badge-secondary-60">Secondary</div>
<div class="badge badge-secondary-70">Secondary</div>
<div class="badge badge-secondary-80">Secondary</div>
<div class="badge badge-secondary-90">Secondary</div>
<div class="badge badge-success-10">Success</div>
<div class="badge badge-success-20">Success</div>
<div class="badge badge-success-30">Success</div>
<div class="badge badge-success-40">Success</div>
<div class="badge badge-success-50">Success</div>
<div class="badge badge-success-60">Success</div>
<div class="badge badge-success-70">Success</div>
<div class="badge badge-success-80">Success</div>
<div class="badge badge-success-90">Success</div>
<div class="badge badge-info-10">Info</div>
<div class="badge badge-info-20">Info</div>
<div class="badge badge-info-30">Info</div>
<div class="badge badge-info-40">Info</div>
<div class="badge badge-info-50">Info</div>
<div class="badge badge-info-60">Info</div>
<div class="badge badge-info-70">Info</div>
<div class="badge badge-info-80">Info</div>
<div class="badge badge-info-90">Info</div>
<div class="badge badge-warning-10">Warning</div>
<div class="badge badge-warning-20">Warning</div>
<div class="badge badge-warning-30">Warning</div>
<div class="badge badge-warning-40">Warning</div>
<div class="badge badge-warning-50">Warning</div>
<div class="badge badge-warning-60">Warning</div>
<div class="badge badge-warning-70">Warning</div>
<div class="badge badge-warning-80">Warning</div>
<div class="badge badge-warning-90">Warning</div>
<div class="badge badge-danger-10">Danger</div>
<div class="badge badge-danger-20">Danger</div>
<div class="badge badge-danger-30">Danger</div>
<div class="badge badge-danger-40">Danger</div>
<div class="badge badge-danger-50">Danger</div>
<div class="badge badge-danger-60">Danger</div>
<div class="badge badge-danger-70">Danger</div>
<div class="badge badge-danger-80">Danger</div>
<div class="badge badge-danger-90">Danger</div>
<div class="badge badge-light-10">Light</div>
<div class="badge badge-light-20">Light</div>
<div class="badge badge-light-30">Light</div>
<div class="badge badge-light-40">Light</div>
<div class="badge badge-light-50">Light</div>
<div class="badge badge-light-60">Light</div>
<div class="badge badge-light-70">Light</div>
<div class="badge badge-light-80">Light</div>
<div class="badge badge-light-90">Light</div>
<div class="badge badge-dark-10">Dark</div>
<div class="badge badge-dark-20">Dark</div>
<div class="badge badge-dark-30">Dark</div>
<div class="badge badge-dark-40">Dark</div>
<div class="badge badge-dark-50">Dark</div>
<div class="badge badge-dark-60">Dark</div>
<div class="badge badge-dark-70">Dark</div>
<div class="badge badge-dark-80">Dark</div>
<div class="badge badge-dark-90">Dark</div>
<div class="badge badge-black-10">Black</div>
<div class="badge badge-black-20">Black</div>
<div class="badge badge-black-30">Black</div>
<div class="badge badge-black-40">Black</div>
<div class="badge badge-black-50">Black</div>
<div class="badge badge-black-60">Black</div>
<div class="badge badge-black-70">Black</div>
<div class="badge badge-black-80">Black</div>
<div class="badge badge-black-90">Black</div>
<div class="badge badge-indigo-10">Indigo</div>
<div class="badge badge-indigo-20">Indigo</div>
<div class="badge badge-indigo-30">Indigo</div>
<div class="badge badge-indigo-40">Indigo</div>
<div class="badge badge-indigo-50">Indigo</div>
<div class="badge badge-indigo-60">Indigo</div>
<div class="badge badge-indigo-70">Indigo</div>
<div class="badge badge-indigo-80">Indigo</div>
<div class="badge badge-indigo-90">Indigo</div>
<div class="badge badge-orange-10">Orange</div>
<div class="badge badge-orange-20">Orange</div>
<div class="badge badge-orange-30">Orange</div>
<div class="badge badge-orange-40">Orange</div>
<div class="badge badge-orange-50">Orange</div>
<div class="badge badge-orange-60">Orange</div>
<div class="badge badge-orange-70">Orange</div>
<div class="badge badge-orange-80">Orange</div>
<div class="badge badge-orange-90">Orange</div>
<div class="badge badge-pink-10">Pink</div>
<div class="badge badge-pink-20">Pink</div>
<div class="badge badge-pink-30">Pink</div>
<div class="badge badge-pink-40">Pink</div>
<div class="badge badge-pink-50">Pink</div>
<div class="badge badge-pink-60">Pink</div>
<div class="badge badge-pink-70">Pink</div>
<div class="badge badge-pink-80">Pink</div>
<div class="badge badge-pink-90">Pink</div>
<div class="badge badge-purple-10">Purple</div>
<div class="badge badge-purple-20">Purple</div>
<div class="badge badge-purple-30">Purple</div>
<div class="badge badge-purple-40">Purple</div>
<div class="badge badge-purple-50">Purple</div>
<div class="badge badge-purple-60">Purple</div>
<div class="badge badge-purple-70">Purple</div>
<div class="badge badge-purple-80">Purple</div>
<div class="badge badge-purple-90">Purple</div>
<div class="badge badge-teal-10">Teal</div>
<div class="badge badge-teal-20">Teal</div>
<div class="badge badge-teal-30">Teal</div>
<div class="badge badge-teal-40">Teal</div>
<div class="badge badge-teal-50">Teal</div>
<div class="badge badge-teal-60">Teal</div>
<div class="badge badge-teal-70">Teal</div>
<div class="badge badge-teal-80">Teal</div>
<div class="badge badge-teal-90">Teal</div>
<div class="badge badge-white-10">White</div>
<div class="badge badge-white-20">White</div>
<div class="badge badge-white-30">White</div>
<div class="badge badge-white-40">White</div>
<div class="badge badge-white-50">White</div>
<div class="badge badge-white-60">White</div>
<div class="badge badge-white-70">White</div>
<div class="badge badge-white-80">White</div>
<div class="badge badge-white-90">White</div>