Chip

Import

import { Chip } from '@heroui/react';

Usage

DefaultAccentSuccessWarningDanger

"use client";

import {Chip} from "@heroui/react";

export function ChipBasic() {
  return (
    <div className="flex items-center gap-3">
      <Chip>Default</Chip>
      <Chip color="accent">Accent</Chip>
      <Chip color="success">Success</Chip>
      <Chip color="warning">Warning</Chip>
      <Chip color="danger">Danger</Chip>
    </div>
  );
}

Variants

Variant / Color	default	accent	success	warning	danger
primary	Default	Accent	Success	Warning	Danger
secondary	Default	Accent	Success	Warning	Danger
tertiary	Default	Accent	Success	Warning	Danger

"use client";

import {Chip} from "@heroui/react";

export function ChipVariants() {
  const variants = ["primary", "secondary", "tertiary"] as const;
  const colors = ["default", "accent", "success", "warning", "danger"] as const;

  return (
    <div className="overflow-x-auto">
      <table className="w-full">
        <thead>
          <tr>
            <th className="sr-only px-4 py-3 text-left text-sm font-medium">Variant / Color</th>
            {colors.map((color) => (
              <th
                key={color}
                className="text-muted px-4 py-3 text-center text-sm font-medium capitalize"
              >
                {color}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {variants.map((variant) => (
            <tr key={variant} className="border-border border-t">
              <td className="text-muted px-4 py-4 text-sm font-medium capitalize">{variant}</td>
              {colors.map((color) => (
                <td key={`${variant}-${color}`} className="px-4 py-4 text-center">
                  <Chip color={color} variant={variant}>
                    {color === "default"
                      ? "Default"
                      : color.charAt(0).toUpperCase() + color.slice(1)}
                  </Chip>
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

With Icons

InformationCompletedPendingFailedLabel

"use client";

import {Chip} from "@heroui/react";
import {Icon} from "@iconify/react";

export function ChipWithIcon() {
  return (
    <div className="flex items-center gap-3">
      <Chip>
        <Icon icon="gravity-ui:circle-fill" width={6} />
        Information
      </Chip>
      <Chip color="success">
        <Icon icon="gravity-ui:circle-check-fill" width={12} />
        Completed
      </Chip>
      <Chip color="warning">
        <Icon icon="gravity-ui:clock" width={12} />
        Pending
      </Chip>
      <Chip color="danger">
        <Icon icon="gravity-ui:xmark" width={12} />
        Failed
      </Chip>
      <Chip color="accent">
        Label
        <Icon icon="gravity-ui:chevron-down" width={12} />
      </Chip>
    </div>
  );
}

Statuses

DefaultActivePendingInactive

New FeatureAvailableBetaDeprecated

"use client";

import {Chip} from "@heroui/react";
import {Icon} from "@iconify/react";

export function ChipStatuses() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        <Chip variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Default
        </Chip>
        <Chip color="success" variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Active
        </Chip>
        <Chip color="warning" variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Pending
        </Chip>
        <Chip color="danger" variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Inactive
        </Chip>
      </div>

      <div className="flex items-center gap-3">
        <Chip>
          <Icon icon="gravity-ui:circle-info" width={12} />
          New Feature
        </Chip>
        <Chip color="success">
          <Icon icon="gravity-ui:check" width={12} />
          Available
        </Chip>
        <Chip color="warning">
          <Icon icon="gravity-ui:triangle-exclamation" width={12} />
          Beta
        </Chip>
        <Chip color="danger">
          <Icon icon="gravity-ui:ban" width={12} />
          Deprecated
        </Chip>
      </div>
    </div>
  );
}

Styling

Passing Tailwind CSS classes

import {Chip} from '@heroui/react';

function CustomChip() {
  return (
    <Chip className="rounded-full px-4 py-2 font-bold">
      Custom Styled
    </Chip>
  );
}

Customizing the component classes

To customize the Chip component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .chip {
    @apply rounded-full text-xs;
  }

  .chip--accent {
    @apply border-accent/20;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Chip component uses these CSS classes (View source styles):

Base Classes

.chip - Base chip styles

Color Classes

.chip--accent - Accent color variant
.chip--danger - Danger color variant
.chip--default - Default color variant
.chip--success - Success color variant
.chip--warning - Warning color variant

Variant Classes

.chip--primary - Primary variant with filled background
.chip--secondary - Secondary variant with border
.chip--tertiary - Tertiary variant with transparent background

Compound Variant Classes

.chip--primary.chip--accent - Primary accent combination
.chip--primary.chip--success - Primary success combination
.chip--primary.chip--warning - Primary warning combination
.chip--primary.chip--danger - Primary danger combination

Interactive States

The component supports focus visibility:

Focus: :focus-visible or [data-focus-visible="true"]

API Reference

Chip Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content to display inside the chip
`className`	`string`	-	Additional CSS classes
`color`	`"default" \| "accent" \| "success" \| "warning" \| "danger"`	`"default"`	Color variant of the chip
`variant`	`"primary" \| "secondary" \| "tertiary"`	`"secondary"`	Visual style variant

On this page