Get started on your web projects with our Tailwind CSS chip which is a compact elements 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.
See below our simple chip component example that you can use for your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.
import { Chip } from "@material-tailwind/react";
export default function Example() {
return <Chip value="chip" />;
}
The chip component comes with 2 different variants that you can change it using the variant
prop.
import { Chip } from "@material-tailwind/react";
export default function Variants() {
return (
<div className="flex gap-2">
<Chip variant="filled" value="chip filled" />
<Chip variant="gradient" value="chip gradient" />
</div>
);
}
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.
import { Chip } from "@material-tailwind/react";
export default function Colors() {
return (
<div className="flex gap-2">
<Chip color="blue" value="blue" />
<Chip color="red" value="red" />
<Chip color="green" value="green" />
<Chip color="amber" value="amber" />
<Chip color="pink" value="pink" />
<Chip color="indigo" value="indigo" />
<Chip color="purple" value="purple" />
<Chip color="teal" value="teal" />
<Chip color="cyan" value="cyan" />
</div>
);
}
The chip component is a dismissible component that you can control it using the dismissible
and show
props.
import { useState, Fragment } from "react";
import { Chip } from "@material-tailwind/react";
export default function Dismissible() {
const [show, setShow] = useState(true);
return (
<Fragment>
{!show && (
<Button
variant="gradient"
className="absolute"
onClick={() => setShow(true)}
>
Show Chip
</Button>
)}
<Chip
variant="gradient"
show={show}
dismissible={{
onClose: () => setShow(false)
}}
value="Dismissible"
/>
</Fragment>
);
}
The following props are available for the button component. These are the custom props that come with we've added for the chip component and you can use all the other native props as well.
Attribute | Type | Description | Default |
---|---|---|---|
variant | Variant | Change chip variant | filled |
color | Color | Change chip color | blue |
value | Value | Add content for chip | No default value its a required prop. |
dismissible | Dismissible | Makes the chip dismissible | undefined |
animate | Animate | Change chip animation | undefined |
show | boolean | Change the chip visibility | true |
icon | node | Add icon at the beginning of chip | undefined |
className | string | Add custom className for chip | '' |
type variant = "filled" | "gradient";
type color =
| "blue-grey"
| "grey"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";
type value = string | number;
type dismissible = {
action?: ReactNode;
onClose: () => void;
};
type animate = {
mount?: Object;
unmount?: Object;
};