docs react chip Tailwind CSS Chip - React
Use our Chip
component based on React and Tailwind CSS for actions in forms, dialogues, and more.
Chip
is an essential element of web design. Basically,
Chip
is styled links that grab the user's attention. They help users
navigate our websites or apps and drive them to a particular action like submitting
a contact form or placing an order as easy as possible.
See below our Chip
example that you can use in 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 Demo
Here's how to implement a simple Chip
component. It can be used for actions in forms, dialogues, and more.
import { Chip } from "@material-tailwind/react" ;
export function ChipDemo () {
return (
< Chip >
< Chip.Label >Material Tailwind</ Chip.Label >
</ Chip >
);
}
import { Chip } from "@material-tailwind/react" ;
export function ChipDemo () {
return (
< Chip >
< Chip.Label >Material Tailwind</ Chip.Label >
</ Chip >
);
}
# Chip Sizes
We provide different chip sizes like sm
, md
, and lg
so you can adapt it easily to your needs. You can simply use the size
prop to change the chip size.
In the example below, we've showcased the different chip sizes that you can use in your project.
import { Chip } from "@material-tailwind/react" ;
export function ChipSizes () {
return (
< div className = "flex items-center gap-2" >
< Chip size = "sm" >
< Chip.Label >Small</ Chip.Label >
</ Chip >
< Chip size = "md" >
< Chip.Label >Medium</ Chip.Label >
</ Chip >
< Chip size = "lg" >
< Chip.Label >Large</ Chip.Label >
</ Chip >
</ div >
);
}
import { Chip } from "@material-tailwind/react" ;
export function ChipSizes () {
return (
< div className = "flex items-center gap-2" >
< Chip size = "sm" >
< Chip.Label >Small</ Chip.Label >
</ Chip >
< Chip size = "md" >
< Chip.Label >Medium</ Chip.Label >
</ Chip >
< Chip size = "lg" >
< Chip.Label >Large</ Chip.Label >
</ Chip >
</ div >
);
}
# Chip Variants
We provides different chip variants like ghost
, outline
, solid
, and gradient
so you can adapt it easily to your needs. You can simply use the variant
prop to change the chip variant.
In the example below, we've showcased the different chip variants that you can use in your project.
import { Chip } from "@material-tailwind/react" ;
export function ChipVariants () {
return (
< div className = "flex items-center gap-2" >
< Chip variant = "ghost" >
< Chip.Label >Ghost</ Chip.Label >
</ Chip >
< Chip variant = "outline" >
< Chip.Label >Outline</ Chip.Label >
</ Chip >
< Chip variant = "solid" >
< Chip.Label >Solid</ Chip.Label >
</ Chip >
< Chip variant = "gradient" >
< Chip.Label >Gradient</ Chip.Label >
</ Chip >
</ div >
);
}
import { Chip } from "@material-tailwind/react" ;
export function ChipVariants () {
return (
< div className = "flex items-center gap-2" >
< Chip variant = "ghost" >
< Chip.Label >Ghost</ Chip.Label >
</ Chip >
< Chip variant = "outline" >
< Chip.Label >Outline</ Chip.Label >
</ Chip >
< Chip variant = "solid" >
< Chip.Label >Solid</ Chip.Label >
</ Chip >
< Chip variant = "gradient" >
< Chip.Label >Gradient</ Chip.Label >
</ Chip >
</ div >
);
}
# Chip Colors
We provide different chip colors like primary
, secondary
, info
, success
, warning
, and error
so you can adapt it easily to your needs. You can simply use the color
prop to change the chip color.
In the example below, we've showcased the different chip colors that you can use in your project.
import { Chip } from "@material-tailwind/react" ;
export function ChipColors () {
return (
< div className = "flex items-center gap-2" >
< Chip color = "primary" >
< Chip.Label >Primary</ Chip.Label >
</ Chip >
< Chip color = "secondary" >
< Chip.Label >Secondary</ Chip.Label >
</ Chip >
< Chip color = "info" >
< Chip.Label >Info</ Chip.Label >
</ Chip >
< Chip color = "success" >
< Chip.Label >Success</ Chip.Label >
</ Chip >
< Chip color = "warning" >
< Chip.Label >Warning</ Chip.Label >
</ Chip >
< Chip color = "error" >
< Chip.Label >Error</ Chip.Label >
</ Chip >
</ div >
);
}
import { Chip } from "@material-tailwind/react" ;
export function ChipColors () {
return (
< div className = "flex items-center gap-2" >
< Chip color = "primary" >
< Chip.Label >Primary</ Chip.Label >
</ Chip >
< Chip color = "secondary" >
< Chip.Label >Secondary</ Chip.Label >
</ Chip >
< Chip color = "info" >
< Chip.Label >Info</ Chip.Label >
</ Chip >
< Chip color = "success" >
< Chip.Label >Success</ Chip.Label >
</ Chip >
< Chip color = "warning" >
< Chip.Label >Warning</ Chip.Label >
</ Chip >
< Chip color = "error" >
< Chip.Label >Error</ Chip.Label >
</ Chip >
</ div >
);
}
# Chip Icon
You can add an icon for the Chip
component to make it more visually appealing and informative. Use the example below to create chips with icon.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
import { Chip } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function ChipIcon () {
return (
< div className = "flex items-center gap-2" >
< Chip variant = "ghost" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Ghost</ Chip.Label >
</ Chip >
< Chip variant = "outline" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Outline</ Chip.Label >
</ Chip >
< Chip variant = "solid" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Solid</ Chip.Label >
</ Chip >
< Chip variant = "gradient" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Gradient</ Chip.Label >
</ Chip >
</ div >
);
}
import { Chip } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function ChipIcon () {
return (
< div className = "flex items-center gap-2" >
< Chip variant = "ghost" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Ghost</ Chip.Label >
</ Chip >
< Chip variant = "outline" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Outline</ Chip.Label >
</ Chip >
< Chip variant = "solid" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Solid</ Chip.Label >
</ Chip >
< Chip variant = "gradient" >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Gradient</ Chip.Label >
</ Chip >
</ div >
);
}
# Chip Dismissible
You can use Chip.DismissTrigger
component to add a close button to your chip for better user experience. Use the example below to create a dismissible chip.
import { Chip } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function ChipDismissible () {
return (
< Chip >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Material Tailwind</ Chip.Label >
< Chip.DismissTrigger />
</ Chip >
);
}
import { Chip } from "@material-tailwind/react" ;
import { ProfileCircle } from "iconoir-react" ;
export function ChipDismissible () {
return (
< Chip >
< Chip.Icon >
< ProfileCircle className = "h-full w-full" />
</ Chip.Icon >
< Chip.Label >Material Tailwind</ Chip.Label >
< Chip.DismissTrigger />
</ Chip >
);
}
# Chip with Avatar
You can add an avatar for the Chip
component to make it more visually appealing and informative. Use the example below to create Chip
with Avatar
component.
import { Chip, Avatar } from "@material-tailwind/react" ;
export function ChipWithAvatar () {
return (
< Chip >
< Chip.Icon >
< Avatar size = "xs" src = "https://dub.sh/TdSBP0D" alt = "profile-picture" />
</ Chip.Icon >
< Chip.Label >Alex Andrew</ Chip.Label >
</ Chip >
);
}
import { Chip, Avatar } from "@material-tailwind/react" ;
export function ChipWithAvatar () {
return (
< Chip >
< Chip.Icon >
< Avatar size = "xs" src = "https://dub.sh/TdSBP0D" alt = "profile-picture" />
</ Chip.Icon >
< Chip.Label >Alex Andrew</ Chip.Label >
</ Chip >
);
}