Badge Component
Axiom01's badge component is a small, versatile indicator used to highlight important information, counts, or statuses. Badges are designed to be concise, visually distinct, and easily themeable.
Badge Component
Axiom01's badge component is a small, versatile indicator used to highlight important information, counts, or statuses. Badges are designed to be concise, visually distinct, and easily themeable.
Basic Badges
Default
Primary
Secondary
Success
Warning
Error
Info
<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge error">Error</span>
<span class="badge info">Info</span>Pill Badges
Use the .pill modifier for a more rounded appearance.
Default Pill
Primary Pill
Success Pill
<span class="badge pill">Default Pill</span>
<span class="badge pill primary">Primary Pill</span>
<span class="badge pill success">Success Pill</span>Badges with Icons
Featured
New
Bug
<span class="badge primary"><i class="fas fa-star"></i> Featured</span>
<span class="badge info"><i class="fas fa-bell"></i> New</span>
<span class="badge error"><i class="fas fa-bug"></i> Bug</span>Badges in Context
Badges can be easily integrated into other components, such as headings or buttons.
Example Heading New!
<h2>Example Heading <span class="badge primary">New!</span></h2>
<button class="button">Notifications <span class="badge secondary">3</span></button>