Chip

Import

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

Anatomy

Import the Chip component and access all parts using dot notation.

Plain-text children are automatically wrapped in <Chip.Label>.

<Chip>
  Label text
</Chip>

Usage

<ComponentPreview name="chip-basic" />

Variants

<ComponentPreview name="chip-variants" />

With Icons

<ComponentPreview name="chip-with-icon" />

Statuses

<ComponentPreview name="chip-statuses" />

Styling

Passing Tailwind CSS classes

You can style the root container and individual slots:

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

function CustomChip() {
  return (
    <Chip className="rounded-full px-4 py-2 font-bold">
      <Chip.Label className="text-lg uppercase">
        Custom Styled
      </Chip.Label>
    </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__label {
    @apply font-medium;
  }

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

  .chip--accent .chip__label {
    @apply text-accent;
  }
}

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 container styles
• .chip__label - Label text slot 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

Chip.Label Props