Chip

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

Installation

npx nextui-cli@latest add chip

No need to install this package if @nextui-org/react is already installed globally.

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

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.

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

Attribute	Type	Description	Default
children	`ReactNode`	The content of the chip.	-
variant	`solid` \| `bordered` \| `light` \| `flat` \| `faded` \| `shadow` \| `dot`	The chip appearance style.	`solid`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	The color of the chip.	`default`
size	`sm` \| `md` \| `lg`	The size of the chip.	`md`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	The radius of the chip.	`full`
avatar	`ReactNode`	Avatar to be rendered in the left side of the chip.	-
startContent	`ReactNode`	Element to be rendered in the left side of the chip. This prop overrides the `avatar` prop.	-
endContent	`ReactNode`	Element to be rendered in the right side of the chip. This prop overrides the default close button when `onClose` is passed.	-
isDisabled	`boolean`	Whether the chip is disabled.	`false`
classNames	`Record<"base"｜ "content"｜ "dot"｜ "avatar"｜ "closeButton", string>`	Allows to set custom class names for the chip slots.	-

Attribute	Type	Description
onClose	`(e: PressEvent) => void`	Handler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent).