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.
<x-chip>chip</x-chip>
Use this example to create a simple and versatile badge component.
<x-chip color="bg-blue-500" class="mr-3">chip filled</x-chip>
<x-chip color="bg-gradient-to-tr from-blue-600 to-blue-400">chip gradient</x-chip>
The Chip component comes with 19 different colors that you can change it using the color class, below there are some examples of the colors.
<x-chip color="bg-blue-500">blue</x-chip>
<x-chip color="bg-red-500">red</x-chip>
<x-chip color="bg-green-500">green</x-chip>
<x-chip color="bg-amber-500">amber</x-chip>
<x-chip color="bg-pink-500">pink</x-chip>
<x-chip color="bg-indigo-500">indigo</x-chip>
<x-chip color="bg-purple-500">purple</x-chip>
<x-chip color="bg-teal-500">teal</x-chip>
<x-chip color="bg-cyan-500">cyan</x-chip>
Use this example to create a simple and versatile badge component.
<x-chip color="bg-blue-500">
<i class="mr-2 fas fa-download"></i>
Downloads
</x-chip>