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>
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>
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>
You can add an icon at the beginning of Chip component using the icon prop.
<Chip color="blue" > <template #icon> <i class="fa fa-cloud-arrow-down"></i> </template> Chip </Chip>
The Chip component is a dismissible component that you can control it using the dismissible and show props.
<Chip v-model="true" color="blue" dismissible @closed="dismissibleChip = false" > Dismissible </Chip>
You can use animation on the open/close state for Chip component using the animation prop.
<Chip v-model="true" color="blue" dismissible @closed="dismissibleAnimateChip = false" animation > Animation </Chip>
<Chip v-model="true" color="blue" variant="filled" > <template #icon> <i class="fa-solid fa-power-off"></i> </template> Hello </Chip>