Chip

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


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 t he 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

AttributeTypeDescriptionDefault
childrenReactNodeThe content of the chip.-
variantsolid | bordered | light | flat | faded | shadow | dotThe chip appearance style.solid
colordefault | primary | secondary | success | warning | dangerThe color of the chip.default
sizesm | md | lgThe size of the chip.md
radiusnone | sm | md | lg | fullThe radius of the chip.full
avatarReactNodeAvatar to be rendered in the left side of the chip.-
startContentReactNodeElement to be rendered in the left side of the chip. This prop overrides the avatar prop.-
endContentReactNodeElement to be rendered in the right side of the chip. This prop overrides the default close button when onClose is passed.-
isDisabledbooleanWhether the chip is disabled.false
classNamesRecord<"base"| "content"| "dot"| "avatar"| "closeButton", string>Allows to set custom class names for the chip slots.-

Chip Events

AttributeTypeDescription
onClose(e: PressEvent) => voidHandler that is called when the close button is pressed. If you pass this prop, the chip will display a close button (endContent).