Svelte Badge

Documentation and examples for Svelte badges, our small count and labelling component.

Examples

Badges can be used as part of links or buttons to provide a counter. 

<BaseButton type="default">
  <span>Unread messages</span>
  <span class="badge badge-primary">24</span>
</BaseButton>

<BaseButton type="primary">
  <span>Notifications</span>
  <span class="badge badge-md badge-circle badge-floating badge-danger border-white">4</span>
</BaseButton>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Default Primary Secondary Info Success Danger Warning 

  
  <Badge variant="default">Default</Badge>  
  
  <Badge variant="primary">Primary</Badge>  
  
  <Badge variant="secondary">Secondary</Badge>  
  
  <Badge variant="info">Info</Badge>  
  
  <Badge variant="success">Success</Badge>  
  
  <Badge variant="danger">Danger</Badge>  
  
  <Badge variant="warning">Warning</Badge>

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding). Useful if you miss the badges from v3.

Default Primary Secondary Info Success Danger Warning 

  
  <Badge pill={true} variant="default">Default</Badge>
  
  <Badge pill={true} variant="primary">Primary</Badge>
  
  <Badge pill={true} variant="secondary">Secondary</Badge>
  
  <Badge pill={true} variant="info">Info</Badge>
  
  <Badge pill={true} variant="success">Success</Badge>
  
  <Badge pill={true} variant="danger">Danger</Badge>
  
  <Badge pill={true} variant="warning">Warning</Badge>

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Default Primary Secondary Info Success Danger Warning 

    
    <a href="javascript:;" class="badge badge-pill badge-default">Default</a>
    
    <a href="javascript:;" class="badge badge-pill badge-primary">Primary</a>
    
    <a href="javascript:;" class="badge badge-pill badge-secondary">Secondary</a>
    
    <a href="javascript:;" class="badge badge-pill badge-info">Info</a>
    
    <a href="javascript:;" class="badge badge-pill badge-success">Success</a>
    
    <a href="javascript:;" class="badge badge-pill badge-danger">Danger</a>
    
    <a href="javascript:;" class="badge badge-pill badge-warning">Warning</a>

Sizes

Use the .badge-md or .badge-lg modifier classes to adjust badge sizes.

Default Medium Large badge 

<Badge pill={true} variant="primary">DEFAULT</Badge>
<Badge pill={true} size="md" variant="danger">MEDIUM</Badge>
<Badge pill={true} size="lg" variant="success">LARGE</Badge>