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.

Material Tailwind
"use client";

import { Chip } from "@material-tailwind/react";

export function ChipDemo() {
  return (
    <Chip>
      <Chip.Label>Material Tailwind</Chip.Label>
    </Chip>
  );
}
"use client";

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.

Small
Medium
Large
"use client";

import { Chip } from "@material-tailwind/react";

export function ChipSizes() {
  return (
    <div className="flex items-end 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>
  );
}
"use client";

import { Chip } from "@material-tailwind/react";

export function ChipSizes() {
  return (
    <div className="flex items-end 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.

Ghost
Outline
Solid
Gradient
"use client";

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>
  );
}
"use client";

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.

Primary
Secondary
Info
Success
Warning
Error
"use client";

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>
  );
}
"use client";

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.

Ghost
Outline
Solid
Gradient
"use client";

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>
  );
}
"use client";

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.

Material Tailwind
"use client";

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>
  );
}
"use client";

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.

profile-pictureAlex Andrew
"use client";

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"
          className="h-full w-full"
        />
      </Chip.Icon>
      <Chip.Label>Alex Andrew</Chip.Label>
    </Chip>
  );
}
"use client";

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"
          className="h-full w-full"
        />
      </Chip.Icon>
      <Chip.Label>Alex Andrew</Chip.Label>
    </Chip>
  );
}

Chip Rounded

By default Chip comes with a pill shape. If you prefer a rounded shape, you can set the isPill prop to false. Use the example below to create a rounded Chip component.

Ghost
Outline
Solid
Gradient
"use client";

import { Chip } from "@material-tailwind/react";

export function ChipRounded() {
  return (
    <div className="flex items-center gap-2">
      <Chip isPill={false} variant="ghost">
        <Chip.Label>Ghost</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="outline">
        <Chip.Label>Outline</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="solid">
        <Chip.Label>Solid</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="gradient">
        <Chip.Label>Gradient</Chip.Label>
      </Chip>
    </div>
  );
}
"use client";

import { Chip } from "@material-tailwind/react";

export function ChipRounded() {
  return (
    <div className="flex items-center gap-2">
      <Chip isPill={false} variant="ghost">
        <Chip.Label>Ghost</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="outline">
        <Chip.Label>Outline</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="solid">
        <Chip.Label>Solid</Chip.Label>
      </Chip>
      <Chip isPill={false} variant="gradient">
        <Chip.Label>Gradient</Chip.Label>
      </Chip>
    </div>
  );
}