Tailwind CSS Chip - Taco Svelte

Use our Taco Chip that represent an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions. Below we are presenting a dynamic example of the Chip component that you can use in your project.

<Chip 
color="blue" 
>
   Chip
</Chip>

Chip Variants

The Chip component comes with 2 different variants that you can change it using the variant prop.

<Chip 
color="blue"
variant="filled"
>
   Chip Filled
</Chip>
<Chip 
color="blue"
variant="gradient"
>
   Chip Gradient
</Chip>

Chip Colors

The Chip component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

<Chip 
color="green" 
>
   green
</Chip>
<Chip 
color="blue" 
>
   Blue
</Chip>
<Chip 
color="red" 
>
   Red
</Chip>
<Chip 
color="amber" 
>
   Amber
</Chip>
<Chip 
color="pink" 
>
   Pink
</Chip>
<Chip 
color="indigo" 
>
   Indigo
</Chip>
<Chip 
color="purple" 
>
   Purple
</Chip>
<Chip 
color="teal" 
>
   Teal
</Chip>
<Chip 
color="cyan" 
>
   Cyan
</Chip>

Chip with Icon

You can add an icon at the beginning of Chip component using the icon prop.

<Chip 
color="blue" 
>
  <span slot="icon">
<i class="fa fa-cloud-arrow-down"></i>
</span>
Chip
</Chip>

Chip Dismissible

The Chip component is a dismissible component that you can control it using the dismissible and show props.

<Chip 
color="blue"
dismissible
show="true"
on:closed="{dismissibleChip = false}"
>
  Dismissible
</Chip>

Chip Animation

You can use animation on the open/close state for Chip component using the animation prop.

<Chip 
color="blue"
dismissible
show="true"
on:closed="{dismissibleAnimateChip = false}"
animation
>
  Animation
</Chip>

Custom Chip

<Chip 
    show="{true}" 
    color="blue" 
    variant="filled" 
    dismissible="{false}" 
    animation="{false}"
>
    <span slot="icon">
      <i class="fa-solid fa-power-off"></i>
    </span>
    Hello
</Chip>