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.
chip
import { Chip } from "@material-tailwind/react";
export function ChipDefault() {
return <Chip value="chip" />;
}The Chip component comes with 4 different variants that you can change it using the variant prop.
chip filled
chip gradient
chip outlined
chip ghost
import { Chip } from "@material-tailwind/react";
export function ChipVariants() {
return (
<div className="flex gap-2">
<Chip value="chip filled" />
<Chip variant="gradient" value="chip gradient" />
<Chip variant="outlined" value="chip outlined" />
<Chip variant="ghost" value="chip ghost" />
</div>
);
}The Chip component comes with 3 different sizes that you can change it using the size prop.
chip small
chip medium
chip large
import { Chip } from "@material-tailwind/react";
export function ChipSizes() {
return (
<div className="flex items-end gap-2">
<Chip size="sm" value="chip small" />
<Chip size="md" value="chip medium" />
<Chip size="lg" value="chip large" />
</div>
);
}The Chip component comes with 19 different colors that you can change it using the color prop.
blue
red
green
amber
pink
indigo
purple
teal
cyan
import { Chip } from "@material-tailwind/react";
export function ChipColors() {
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>
);
}You can add an icon at the beginning of Chip component using the icon prop.
account
account
account
account
import { Chip } from "@material-tailwind/react";
function Icon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
className="h-5 w-5"
>
<path
fillRule="evenodd"
d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
clipRule="evenodd"
/>
</svg>
);
}
export function ChipIcon() {
return (
<div className="flex gap-2">
<Chip value="account" icon={<Icon />} />
<Chip value="account" variant="gradient" icon={<Icon />} />
<Chip value="account" variant="outlined" icon={<Icon />} />
<Chip value="account" variant="ghost" icon={<Icon />} />
</div>
);
}You can pass tailwind css classes for the Chip component using the className prop this helps to do any sort of customization for the chip.
chip filled
chip gradient
chip outlined
chip ghost
import { Chip } from "@material-tailwind/react";
export function ChipPills() {
return (
<div className="flex gap-2">
<Chip value="chip filled" className="rounded-full" />
<Chip variant="gradient" value="chip gradient" className="rounded-full" />
<Chip variant="outlined" value="chip outlined" className="rounded-full" />
<Chip variant="ghost" value="chip ghost" className="rounded-full" />
</div>
);
}This chip element example is perfect if you want to announce the status of a particular item, process, or person.
Online
Offline
import { Chip } from "@material-tailwind/react";
export function ChipWithStatus() {
return (
<div className="flex gap-2">
<Chip
variant="ghost"
color="green"
size="sm"
value="Online"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-green-900 content-['']" />
}
/>
<Chip
variant="ghost"
color="red"
size="sm"
value="Offline"
icon={
<span className="mx-auto mt-1 block h-2 w-2 rounded-full bg-red-900 content-['']" />
}
/>
</div>
);
}Use this example to represent selectable items or options in a compact manner.
Online
Offline
import { Chip, Checkbox } from "@material-tailwind/react";
export function ChipWithCheckbox() {
return (
<div className="flex gap-2">
<Chip
value="Online"
variant="ghost"
color="green"
icon={
<Checkbox
color="green"
ripple={false}
containerProps={{ className: "p-0" }}
className="-ml-px border-2 border-green-900 before:hidden checked:border-green-900 checked:bg-green-900"
/>
}
/>
<Chip
value="Offline"
variant="ghost"
color="red"
icon={
<Checkbox
color="red"
ripple={false}
containerProps={{ className: "p-0" }}
className="-ml-px border-2 border-red-900 before:hidden checked:border-red-900 checked:bg-red-900"
/>
}
/>
</div>
);
}The Chip component is a dismissible component that you can control it using the dismissible and show props.
Dismissible
import React from "react";
import { Chip, Button } from "@material-tailwind/react";
export function ChipDismissible() {
const [open, setOpen] = React.useState(true);
return (
<>
{!open && (
<Button className="absolute" onClick={() => setOpen(true)}>
Show Chip
</Button>
)}
<Chip open={open} value="Dismissible" onClose={() => setOpen(false)} />
</>
);
}You can modify the open/close state animation for Chip component using the animate prop.
Custom Animation
import React from "react";
import { Chip, Button } from "@material-tailwind/react";
export function ChipCustomAnimation() {
const [open, setOpen] = React.useState(true);
return (
<>
{!open && (
<Button className="absolute" onClick={() => setOpen(true)}>
Show Chip
</Button>
)}
<Chip
open={open}
animate={{
mount: { y: 0 },
unmount: { y: 50 },
}}
value="Custom Animation"
onClose={() => setOpen(false)}
/>
</>
);
}Use the example below for a chip containing an avatar.
Tania Andrew
import { Chip, Avatar, Typography } from "@material-tailwind/react";
export function ChipWithAvatar() {
return (
<Chip
icon={
<Avatar
size="xs"
variant="circular"
className="h-full w-full -translate-x-0.5"
alt="Tania Andrew"
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80"
/>
}
value={
<Typography
variant="small"
color="white"
className="font-medium capitalize leading-none"
>
Tania Andrew
</Typography>
}
className="rounded-full py-1.5"
/>
);
}The following props are available for button component. These are the custom props that 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 | gray |
value | node | Add content for chip | No default value it's a required prop. |
onClose | func | Callback for closing the chip component | undefined |
action | node | Change the onClose action button | undefined |
open | boolean | Change chip visibility | true |
animate | Animate | Change chip animation | undefined |
icon | node | Add icon at the beginning of chip | undefined |
className | string | Add custom className for chip | '' |
For TypeScript Only
import type { ChipProps } from "@material-tailwind/react";type variant = "filled" | "gradient" | "outlined" | "ghost";type color =
| "blue-gray"
| "gray"
| "brown"
| "deep-orange"
| "orange"
| "amber"
| "yellow"
| "lime"
| "light-green"
| "green"
| "teal"
| "cyan"
| "light-blue"
| "blue"
| "indigo"
| "deep-purple"
| "purple"
| "pink"
| "red";type animate = {
mount?: object;
unmount?: object;
};Learn how to customize the theme and styles for chip component, the theme object for chip component has three main objects:
A. The defaultProps object for setting up the default value for props of chip component.
B. The valid object for customizing the valid values for chip component props.
C. The styles object for customizing the theme and styles of chip component.
You can customize the theme and styles of chip component by adding Tailwind CSS classes as key paired values for objects.
interface ChipStylesType {
defaultProps: {
variant: string;
color: string;
icon: node;
open: boolean;
action: node;
onClose: func;
animate: {
mount: object;
unmount: object;
};
className: string;
};
valid: {
variants: string[];
colors: string[];
};
styles: {
base: {
chip: object;
action: object;
};
variants: {
filled: object;
gradient: object;
outlined: object;
ghost: object;
};
};
}For TypeScript Only
import { ChipStylesType } from "@material-tailwind/react";const theme = {
chip: {
defaultProps: {
variant: "filled",
size: "md",
color: "blue",
icon: undefined,
open: true,
onClose: undefined,
action: undefined,
animate: {
unmount: {},
mount: {},
},
className: "",
},
valid: {
variants: ["filled", "gradient", "outlined", "ghost"],
sizes: ["sm", "md", "lg"],
colors: [
"blue-gray",
"gray",
"brown",
"deep-orange",
"orange",
"amber",
"yellow",
"lime",
"light-green",
"green",
"teal",
"cyan",
"light-blue",
"blue",
"indigo",
"deep-purple",
"purple",
"pink",
"red",
],
},
styles: {
base: {
chip: {
position: "relative",
display: "grid",
placeItems: "items-center",
fontFamily: "font-sans",
fontWeight: "font-bold",
textTransform: "uppercase",
lineHeight: "leading-none",
whiteSpace: "whitespace-nowrap",
userSelect: "select-none",
},
action: {
position: "!absolute",
top: "top-2/4",
right: "right-1",
translate: "-translate-y-2/4",
mx: "mx-px",
rounded: "rounded-md",
},
icon: {
position: "absolute",
top: "top-2/4",
translate: "-translate-y-2/4",
},
},
sizes: {
sm: {
chip: {
py: "py-1",
px: "px-2",
fontSize: "text-xs",
borderRadius: "rounded-md",
},
action: {
width: "w-4",
height: "h-4",
},
icon: {
width: "w-4",
height: "h-4",
left: "left-1",
},
},
md: {
chip: {
py: "py-1.5",
px: "px-3",
fontSize: "text-xs",
borderRadius: "rounded-lg",
},
action: {
width: "w-5",
height: "h-5",
},
icon: {
width: "w-5",
height: "h-5",
left: "left-1.5",
},
},
lg: {
chip: {
py: "py-2",
px: "px-4",
fontSize: "text-xs",
borderRadius: "rounded-lg",
},
action: {
width: "w-6",
height: "h-6",
},
icon: {
width: "w-6",
height: "h-6",
left: "left-1.5",
},
},
},
variants: {
filled: {
"blue-gray": {
backgroud: "bg-blue-gray-500",
color: "text-white",
},
gray: {
backgroud: "bg-gray-500",
color: "text-white",
},
brown: {
backgroud: "bg-brown-500",
color: "text-white",
},
"deep-orange": {
backgroud: "bg-deep-orange-500",
color: "text-white",
},
orange: {
backgroud: "bg-orange-500",
color: "text-white",
},
amber: {
backgroud: "bg-amber-500",
color: "text-black",
},
yellow: {
backgroud: "bg-yellow-500",
color: "text-black",
},
lime: {
backgroud: "bg-lime-500",
color: "text-black",
},
"light-green": {
backgroud: "bg-light-green-500",
color: "text-white",
},
green: {
backgroud: "bg-green-500",
color: "text-white",
},
teal: {
backgroud: "bg-teal-500",
color: "text-white",
},
cyan: {
backgroud: "bg-cyan-500",
color: "text-white",
},
"light-blue": {
backgroud: "bg-light-blue-500",
color: "text-white",
},
blue: {
backgroud: "bg-blue-500",
color: "text-white",
},
indigo: {
backgroud: "bg-indigo-500",
color: "text-white",
},
"deep-purple": {
backgroud: "bg-deep-purple-500",
color: "text-white",
},
purple: {
backgroud: "bg-purple-500",
color: "text-white",
},
pink: {
backgroud: "bg-pink-500",
color: "text-white",
},
red: {
backgroud: "bg-red-500",
color: "text-white",
},
},
gradient: {
"blue-gray": {
backgroud: "bg-gradient-to-tr from-blue-gray-600 to-blue-gray-400",
color: "text-white",
},
gray: {
backgroud: "bg-gradient-to-tr from-gray-600 to-gray-400",
color: "text-white",
},
brown: {
backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400",
color: "text-white",
},
"deep-orange": {
backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400",
color: "text-white",
},
orange: {
backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400",
color: "text-white",
},
amber: {
backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400",
color: "text-black",
},
yellow: {
backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400",
color: "text-black",
},
lime: {
backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400",
color: "text-black",
},
"light-green": {
backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400",
color: "text-white",
},
green: {
backgroud: "bg-gradient-to-tr from-green-600 to-green-400",
color: "text-white",
},
teal: {
backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400",
color: "text-white",
},
cyan: {
backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400",
color: "text-white",
},
"light-blue": {
backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400",
color: "text-white",
},
blue: {
backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400",
color: "text-white",
},
indigo: {
backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400",
color: "text-white",
},
"deep-purple": {
backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400",
color: "text-white",
},
purple: {
backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400",
color: "text-white",
},
pink: {
backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400",
color: "text-white",
},
red: {
backgroud: "bg-gradient-to-tr from-red-600 to-red-400",
color: "text-white",
},
},
outlined: {
"blue-gray": {
border: "border border-blue-gray-500",
color: "text-blue-gray-700",
},
gray: {
border: "border border-gray-500",
color: "text-gray-700",
},
brown: {
border: "border border-brown-500",
color: "text-brown-700",
},
"deep-orange": {
border: "border border-deep-orange-500",
color: "text-deep-orange-700",
},
orange: {
border: "border border-orange-500",
color: "text-orange-700",
},
amber: {
border: "border border-amber-500",
color: "text-amber-700",
},
yellow: {
border: "border border-yellow-500",
color: "text-yellow-700",
},
lime: {
border: "border border-lime-500",
color: "text-lime-700",
},
"light-green": {
border: "border border-light-green-500",
color: "text-light-green-700",
},
green: {
border: "border border-green-500",
color: "text-green-700",
},
teal: {
border: "border border-teal-500",
color: "text-teal-700",
},
cyan: {
border: "border border-cyan-500",
color: "text-cyan-700",
},
"light-blue": {
border: "border border-light-blue-500",
color: "text-light-blue-700",
},
blue: {
border: "border border-blue-500",
color: "text-blue-700",
},
indigo: {
border: "border border-indigo-500",
color: "text-indigo-700",
},
"deep-purple": {
border: "border border-deep-purple-500",
color: "text-deep-purple-700",
},
purple: {
border: "border border-purple-500",
color: "text-purple-700",
},
pink: {
border: "border border-pink-500",
color: "text-pink-700",
},
red: {
border: "border border-red-500",
color: "text-red-700",
},
},
ghost: {
"blue-gray": {
backgroud: "bg-blue-gray-500/20",
color: "text-blue-gray-900",
},
gray: {
backgroud: "bg-gray-500/20",
color: "text-gray-900",
},
brown: {
backgroud: "bg-brown-500/20",
color: "text-brown-900",
},
"deep-orange": {
backgroud: "bg-deep-orange-500/20",
color: "text-deep-orange-900",
},
orange: {
backgroud: "bg-orange-500/20",
color: "text-orange-900",
},
amber: {
backgroud: "bg-amber-500/20",
color: "text-amber-900",
},
yellow: {
backgroud: "bg-yellow-500/20",
color: "text-yellow-900",
},
lime: {
backgroud: "bg-lime-500/20",
color: "text-lime-900",
},
"light-green": {
backgroud: "bg-light-green-500/20",
color: "text-light-green-900",
},
green: {
backgroud: "bg-green-500/20",
color: "text-green-900",
},
teal: {
backgroud: "bg-teal-500/20",
color: "text-teal-900",
},
cyan: {
backgroud: "bg-cyan-500/20",
color: "text-cyan-900",
},
"light-blue": {
backgroud: "bg-light-blue-500/20",
color: "text-light-blue-900",
},
blue: {
backgroud: "bg-blue-500/20",
color: "text-blue-900",
},
indigo: {
backgroud: "bg-indigo-500/20",
color: "text-indigo-900",
},
"deep-purple": {
backgroud: "bg-deep-purple-500/20",
color: "text-deep-purple-900",
},
purple: {
backgroud: "bg-purple-500/20",
color: "text-purple-900",
},
pink: {
backgroud: "bg-pink-500/20",
color: "text-pink-900",
},
red: {
backgroud: "bg-red-500/20",
color: "text-red-900",
},
},
},
},
},
};