• Components
  • Badge

Badge

Badge 
@!jrmc.badge({ text: 'Badge' })
<span class="badge" >
  Badge
</span>

Badge color

neutral primary secondary accent ghost info success warning error 
@!jrmc.badge({ text: 'neutral' })
@!jrmc.badge({ text: 'primary', class: 'badge-primary' })
@!jrmc.badge({ text: 'secondary', class: 'badge-secondary' })
@!jrmc.badge({ text: 'accent', class: 'badge-accent' })
@!jrmc.badge({ text: 'ghost', class: 'badge-ghost' })
@!jrmc.badge({ text: 'info', class: 'badge-info' })
@!jrmc.badge({ text: 'success', class: 'badge-success' })
@!jrmc.badge({ text: 'warning', class: 'badge-warning' })
@!jrmc.badge({ text: 'error', class: 'badge-error' })
<span class="badge" >
  neutral
</span>
<span class="badge badge-primary" >
  primary
</span>
<span class="badge badge-secondary" >
  secondary
</span>
<span class="badge badge-accent" >
  accent
</span>
<span class="badge badge-ghost" >
  ghost
</span>
<span class="badge badge-info" >
  info
</span>
<span class="badge badge-success" >
  success
</span>
<span class="badge badge-warning" >
  warning
</span>
<span class="badge badge-error" >
  error
</span>

Badge outline

neutral primary secondary accent ghost info success warning error 
@!jrmc.badge({ text: 'neutral', class: 'badge-outline' })
@!jrmc.badge({ text: 'primary', class: 'badge-primary badge-outline' })
@!jrmc.badge({ text: 'secondary', class: 'badge-secondary badge-outline' })
@!jrmc.badge({ text: 'accent', class: 'badge-accent badge-outline' })
@!jrmc.badge({ text: 'ghost', class: 'badge-ghost badge-outline' })
@!jrmc.badge({ text: 'info', class: 'badge-info badge-outline' })
@!jrmc.badge({ text: 'success', class: 'badge-success badge-outline' })
@!jrmc.badge({ text: 'warning', class: 'badge-warning badge-outline' })
@!jrmc.badge({ text: 'error', class: 'badge-error badge-outline' })
<span class="badge badge-outline" >
  neutral
</span>
<span class="badge badge-primary badge-outline" >
  primary
</span>
<span class="badge badge-secondary badge-outline" >
  secondary
</span>
<span class="badge badge-accent badge-outline" >
  accent
</span>
<span class="badge badge-ghost badge-outline" >
  ghost
</span>
<span class="badge badge-info badge-outline" >
  info
</span>
<span class="badge badge-success badge-outline" >
  success
</span>
<span class="badge badge-warning badge-outline" >
  warning
</span>
<span class="badge badge-error badge-outline" >
  error
</span>

Badge size

987,654 987,654 987,654 987,654 
@!jrmc.badge({ text: '987,654', class: 'badge-lg' })
@!jrmc.badge({ text: '987,654', class: 'badge-md' })
@!jrmc.badge({ text: '987,654', class: 'badge-sm' })
@!jrmc.badge({ text: '987,654', class: 'badge-xs' })
<span class="badge badge-lg" >
  987,654
</span>
<span class="badge badge-md" >
  987,654
</span>
<span class="badge badge-sm" >
  987,654
</span>
<span class="badge badge-xs" >
  987,654
</span>

Badge empty 

@!jrmc.badge({ class: 'badge-lg' })
@!jrmc.badge({ class: 'badge-md' })
@!jrmc.badge({ class: 'badge-sm' })
@!jrmc.badge({ class: 'badge-xs' })
<span class="badge badge-lg" >
  
</span>
<span class="badge badge-md" >
  
</span>
<span class="badge badge-sm" >
  
</span>
<span class="badge badge-xs" >
  
</span>

Badge icon

Badge 
@jrmc.badge({ as: 'div' })
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  Badge
@end
<div class="badge" >
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
  Badge
</div>