Chips

VISPA-UI includes an expertly-crafted 8 varieties of Chips which can make your UI building experience effortless.

Basic Chip

To use the Basic Chip component give the chip class to the span.

              
                
              
              
<span class="chip">basic</span>
            
          

Draggable Chip

To use the Draggable Chip component set the draggable property to true of the span.

              
                
              
              
<span draggable="true" class="chip">draggable</span>
            
          

Dismissible Chip

To use the Dismissible Chip component give the chip__icon class to the close icon.

🥭 mango

              
                
              
              
<span class="chip">
  🥭 mango
  <img 
    class="icon-sm chip__icon" 
    src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/close.svg"
  />
</span>
            
          

Primary Chip

To use the Primary Chip component give the ch--primary class to the span.

              
                
              
              
<span class="chip ch--primary">primary</span>
            
          

Danger Chip

To use the Danger Chip component give the ch--danger class to the span.

              
                
              
              
<span class="chip ch--danger">danger</span>
            
          

Success Chip

To use the Success Chip component give the ch--success class to the span.

              
                
              
              
<span class="chip ch--success">success</span>
            
          

Warning Chip

To use the Warning Chip component give the ch--warning class to the span.

              
                
              
              
<span class="chip ch--warning">warning</span>
            
          

Dark Chip

To use the Dark Chip component give the ch--dark class to the span.

              
                
              
              
<span class="chip ch--dark">dark</span>