Chip

A small block of information that displays input information, attributes, or actions.

Installation

npm

npm add @heroui-vue/chip

pnpm

pnpm add @heroui-vue/chip

yarn

yarn add @heroui-vue/chip

bun

bun add @heroui-vue/chip

Usage

PreviewSource Code

Chip

Disabled

PreviewSource Code

Chip

Sizes

PreviewSource Code

SmallMediumLarge

Colors

PreviewSource Code

DefaultPrimarySecondarySuccessWarningDanger

Radius

PreviewSource Code

FullLargeMediumSmall

Variants

PreviewSource Code

SolidBorderedLightFlatFadedShadowDot

Start and End Content

PreviewSource Code

Chip Chip

With Close Button

PreviewSource Code

Chip Chip

With Avatar

INFO

Depends on the Avatar component

WARNING

Work in progress

Style Slots

• base: The base slot of the Chip, which is the container of the Chip.
• content: The content slot of the Chip, which is the container of the Chip's children.
• dot: The dot on the left side of the Chip. Visible when the variant="dot" property is set.
• avatar: The avatar class of the Chip. Visible when using the avatar slot.
• closeButton: The close button class of the Chip. Visible when listening to the @close event.

Custom Styles

PreviewSource Code

New