AstroLaunch UI Chip - React

Get started on your web projects with our AstroLaunch UI 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 AstroLaunch UI and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

chip

Chip Variants

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>
  );
}

Chip Sizes

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>
  );
}

Chip Colors

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>
  );
}

Chip Icon

You can add an icon at the beginning of Chip component using the icon prop.

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>
  );
}

Chip Pills

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>
  );
}

Chip with Status

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>
  );
}

Chip with Checkbox

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>
  );
}

Chip Dismissible

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)} />
    </>
  );
}

Chip Custom Animation

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)}
      />
    </>
  );
}

Chip with Avatar

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

Chip Props

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";

Types - Variant

type variant = "filled" | "gradient" | "outlined" | "ghost";

Types - Color

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";

Types - Animate

type animate = {
  mount?: object;
  unmount?: object;
};

Chip Theme

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.

Chip Theme Object Type

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";

Chip Theme Customization

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",
          },
        },
      },
    },
  },
};

If you want to see more examples and properties please check the official Material Tailwind Documentation.