Chip

A Chip is a small block of essential information that represent an input, attribute, or action.

Installation

The above command is for individual installation only. You may skip this step if @heroui/react is already installed globally.

Import

Usage

Disabled

Sizes

Colors

Radius

Variants

Start & End Content

With Close Button

If you pass the onClose prop, the close button will be visible. You can override the close icon by passing the endContent prop.

With Avatar

List of Chips

Slots

• base: The base slot of the chip, it is the container of the chip.
• content: The content slot of the chip, it is the container of the chip children.
• dot: Small dot on the left side of the chip. It is visible when the variant=dot prop is passed.
• avatar: Avatar classes of the chip. It is visible when the avatar prop is passed.
• closeButton: Close button classes of the chip. It is visible when the onClose prop is passed.

Custom Styles

You can customize the Chip component by passing custom Tailwind CSS classes to the component slots.

API

Chip Props

Chip Events