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
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.

Small
Medium
Large
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.

Ghost
Outline
Solid
Gradient
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.

Primary
Secondary
Info
Success
Warning
Error
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.

Ghost
Outline
Solid
Gradient
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.

Material Tailwind
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.

profile-pictureAlex Andrew
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>
  );
}