No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Svelte Bootstrap Tags, Labels & Badges
 
Svelte Tags, Labels & Badges - Bootstrap 4 & Material Design
 
Svelte Bootstrap tags are components which separate content placed in the same wrapper, but in the separate pane.
  Only one pane can be displayed at the time.
 
Their main goal is to provide your visitors with an intuitive way of getting what they want. Just consider, how
  convenient it is to find all the articles related to web development just by using 
      web
      development tag.
 
Basic example
 
Badges scale to match the size of the immediate parent element by using relative font sizing and em
  units.
 
   
This is the first heading
    New
 
This is the second heading
    New
 
This is the third heading
    New
 
This is the fourth heading
    New
 
This is the fifth heading
    New
 
This is the sixth heading
    New
 
 
<script>
  import {MDBBadge, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <h1>This is the first heading
    <MDBBadge color="primary">New</MDBBadge>
  </h1>
  <h2>This is the second heading
    <MDBBadge color="primary">New</MDBBadge>
  </h2>
  <h3>This is the third heading
    <MDBBadge color="primary">New</MDBBadge>
  </h3>
  <h4>This is the fourth heading
    <MDBBadge color="primary">New</MDBBadge>
  </h4>
  <h5>This is the fifth heading
    <MDBBadge color="primary">New</MDBBadge>
  </h5>
  <h6>This is the sixth heading
    <MDBBadge color="primary">New</MDBBadge>
  </h6>
</MDBContainer>

 
Badges can be used as part of links or buttons to provide a counter.
 
   
 
 
<script>
  import {MDBBadge, MDBContainer, MDBBtn} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBtn color="primary">
    Notifications
    <MDBBadge color="danger" class="ml-2">4</MDBBadge>
  </MDBBtn>
</MDBContainer>

 
Contextual variations
 
Add any of the below mentioned modifier classes to change the appearance of a badge.
 
   
Default Primary Success Info Warning Danger Light Dark
 
 
<script>
  import {MDBBadge, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBadge color="default">Default</MDBBadge>
  <MDBBadge color="primary">Primary</MDBBadge>
  <MDBBadge color="success">Success</MDBBadge>
  <MDBBadge color="info">Info</MDBBadge>
  <MDBBadge color="warning">Warning</MDBBadge>
  <MDBBadge color="danger">Danger</MDBBadge>
  <MDBBadge color="light">Light</MDBBadge>
  <MDBBadge color="dark">Dark</MDBBadge>
</MDBContainer>

 
Pill badges
 
Use the pill prop to make badges more rounded (with a larger border-radius
  and additional horizontal padding).
 
   
Default Primary Success Info Warning Danger Light Dark
 
 
<script>
  import {MDBBadge, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBadge pill color="default">Default</MDBBadge>
  <MDBBadge pill color="primary">Primary</MDBBadge>
  <MDBBadge pill color="success">Success</MDBBadge>
  <MDBBadge pill color="info">Info</MDBBadge>
  <MDBBadge pill color="warning">Warning</MDBBadge>
  <MDBBadge pill color="danger">Danger</MDBBadge>
  <MDBBadge pill color="light">Light</MDBBadge>
  <MDBBadge pill color="dark">Dark</MDBBadge>
</MDBContainer>

 
Links
 
Using the contextual badges with an <a> tag quickly provide actionable
  badges with hover and focus states.
 
   
Default Primary Success Info Warning Danger Light Dark
 
 
<script>
  import {MDBBadge, MDBContainer} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBBadge tag="a" color="default">Default</MDBBadge>
  <MDBBadge tag="a" color="primary">Primary</MDBBadge>
  <MDBBadge tag="a" color="success">Success</MDBBadge>
  <MDBBadge tag="a" color="info">Info</MDBBadge>
  <MDBBadge tag="a" color="warning">Warning</MDBBadge>
  <MDBBadge tag="a" color="danger">Danger</MDBBadge>
  <MDBBadge tag="a" color="light">Light</MDBBadge>
  <MDBBadge tag="a" color="dark">Dark</MDBBadge>
</MDBContainer>

 
Badges with icons
 
   
    
 
    
 
    
 
   
 
 
<script>
  import {MDBBadge, MDBContainer, MDBIcon, MDBRow, MDBCol} from "mdbsvelte";
</script>
<MDBContainer>
  <MDBRow>
    <MDBCol md="12" class="mb-4">
      <MDBBadge color="default">
        <MDBIcon fab icon="facebook-f"/>
      </MDBBadge>
      <MDBBadge color="primary">
        <MDBIcon fab icon="instagram"/>
      </MDBBadge>
      <MDBBadge color="success">
        <MDBIcon fab icon="snapchat-ghost"/>
      </MDBBadge>
      <MDBBadge color="info">
        <MDBIcon icon="anchor"/>
      </MDBBadge>
      <MDBBadge color="warning">
        <MDBIcon far icon="sun"/>
      </MDBBadge>
    </MDBCol>

    <MDBCol md="12" class="mb-4">
      <MDBBadge color="danger">
        <MDBIcon far icon="battery-three-quarters"/>
      </MDBBadge>
      <MDBBadge color="pink">
        <MDBIcon icon="wheelchair"/>
      </MDBBadge>
      <MDBBadge color="light-blue">
        <MDBIcon far icon="heart"/>
      </MDBBadge>
      <MDBBadge color="purple">
        <MDBIcon icon="bullhorn"/>
      </MDBBadge>
      <MDBBadge color="orange">
        <MDBIcon fab icon="btc"/>
      </MDBBadge>
    </MDBCol>

    <MDBCol md="12" class="mb-4">
      <MDBBadge color="teal">
        <MDBIcon far icon="comments"/>
      </MDBBadge>
      <MDBBadge color="orange">
        <MDBIcon icon="coffee"/>
      </MDBBadge>
      <MDBBadge color="green">
        <MDBIcon icon="user"/>
      </MDBBadge>
      <MDBBadge color="indigo">
        <MDBIcon fab icon="android" size="2x"/>
      </MDBBadge>
      <MDBBadge color="cyan">
        <MDBIcon icon="cog" size="2x"/>
      </MDBBadge>
    </MDBCol>

    <MDBCol md="12" class="mb-4">
      <MDBBadge color="orange">
        <MDBIcon fab icon="btc" size="2x"/>
      </MDBBadge>
      <MDBBadge pill color="teal">
        <MDBIcon icon="heart" size="2x"/>
      </MDBBadge>
      <MDBBadge pill color="green">
        <MDBIcon fab icon="apple" size="2x"/>
      </MDBBadge>
      <MDBBadge pill color="purple">
        <MDBIcon icon="users" size="2x"/>
      </MDBBadge>
    </MDBCol>
  </MDBRow>
</MDBContainer>