Chip | HeroUI v3 (Previously NextUI) - The design system you don't have to build

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 type="accent">Accent</Chip>
      <Chip type="success">Success</Chip>
      <Chip type="warning">Warning</Chip>
      <Chip type="danger">Danger</Chip>
    </div>
  );
}

Variants

lg

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

md

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

sm

accent

default

success

warning

danger

primary

Label

secondary

Label

tertiary

Label

soft

Label

"use client";

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

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

  return (
    <div className="flex flex-col gap-8">
      {sizes.map((size, index) => (
        <React.Fragment key={size}>
          <div className="flex flex-col gap-4">
            <h3 className="text-muted text-sm font-semibold capitalize">{size}</h3>
            {/* Color labels header */}
            <div className="flex items-center gap-3">
              <div className="w-24 shrink-0" />
              {colors.map((color) => (
                <div
                  key={color}
                  className="flex shrink-0 items-center justify-center"
                  style={{width: "130px"}}
                >
                  <span className="text-muted text-xs capitalize">{color}</span>
                </div>
              ))}
            </div>
            <div className="flex flex-col gap-3">
              {variants.map((variant) => (
                <div key={variant} className="flex items-center gap-3">
                  <div className="text-muted w-24 shrink-0 text-sm capitalize">{variant}</div>
                  {colors.map((color) => (
                    <div
                      key={color}
                      className="flex shrink-0 items-center justify-center"
                      style={{width: "130px"}}
                    >
                      <Chip color={color} size={size} variant={variant}>
                        <Icon icon="gravity-ui:circle-dashed" />
                        Label <Icon icon="gravity-ui:circle-dashed" />
                      </Chip>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>
          {index < sizes.length - 1 && <Separator />}
        </React.Fragment>
      ))}
    </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 type="success">
        <Icon icon="gravity-ui:circle-check-fill" width={12} />
        Completed
      </Chip>
      <Chip type="warning">
        <Icon icon="gravity-ui:clock" width={12} />
        Pending
      </Chip>
      <Chip type="danger">
        <Icon icon="gravity-ui:xmark" width={12} />
        Failed
      </Chip>
      <Chip type="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 type="success" variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Active
        </Chip>
        <Chip type="warning" variant="primary">
          <Icon icon="gravity-ui:circle-fill" width={6} />
          Pending
        </Chip>
        <Chip type="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 type="success">
          <Icon icon="gravity-ui:check" width={12} />
          Available
        </Chip>
        <Chip type="warning">
          <Icon icon="gravity-ui:triangle-exclamation" width={12} />
          Beta
        </Chip>
        <Chip type="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
.chip--soft - Soft variant with lighter background

Size Classes

.chip--sm - Small size
.chip--md - Medium size (default)
.chip--lg - Large size

Compound Variant Classes

Chips support combining variant and color classes (e.g., .chip--secondary.chip--accent). The following combinations have default styles defined:

Primary Variants:

.chip--primary.chip--accent - Primary accent combination with filled background
.chip--primary.chip--success - Primary success combination with filled background
.chip--primary.chip--warning - Primary warning combination with filled background
.chip--primary.chip--danger - Primary danger combination with filled background

Soft Variants:

.chip--accent.chip--soft - Soft accent combination with lighter background
.chip--success.chip--soft - Soft success combination with lighter background
.chip--warning.chip--soft - Soft warning combination with lighter background
.chip--danger.chip--soft - Soft danger combination with lighter background

Note: You can apply custom styles to any variant-color combination (e.g., .chip--secondary.chip--accent, .chip--tertiary.chip--success) using the @layer components directive in your CSS.

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" \| "soft"`	`"secondary"`	Visual style variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the chip

ChipUpdated

Import

Usage

Variants

lg

md

sm

With Icons

Statuses

Styling

Passing Tailwind CSS classes

Customizing the component classes

CSS Classes

Base Classes

Color Classes

Variant Classes

Size Classes

Compound Variant Classes

API Reference

Chip Props

On this page