Chip

A Chip is a compact presentational component used to represent an attribute or detail. It serves as a base for other small display components such as pill and badge.

Basic usage

basic chip

<Chip>basic chip</Chip>

INFO

The text passed to Chip will be transformed to uppercase.

Playground

basic chip

Default Slot Content

Is Removable

Should Override Colors

Disabled

Colors

Chips provide out-of-the box color support. By passing a color property to the component, both the background and text colors will be set with accessibility already taken into account.

bluegreeniceorangepurpleredroyalseafoamtealyellow

<Chip color-scheme="blue">blue</Chip>
<Chip color-scheme="green">green</Chip>
<Chip color-scheme="ice">ice</Chip>
<Chip color-scheme="orange">orange</Chip>
<Chip color-scheme="purple">purple</Chip>
<Chip color-scheme="red">red</Chip>
<Chip color-scheme="royal">royal</Chip>
<Chip color-scheme="seafoam">seafoam</Chip>
<Chip color-scheme="teal">teal</Chip>
<Chip color-scheme="yellow">yellow</Chip>

By default, chips will render with a light shade, but the shade property can be altered to main in order to render vivid colors.

bluegreeniceorangepurpleseafoamredroyaltealyellow

<Chip shade="main" color-scheme="blue">blue</Chip>
<Chip shade="main" color-scheme="green">green</Chip>
<Chip shade="main" color-scheme="ice">ice</Chip>
<Chip shade="main" color-scheme="orange">orange</Chip>
<Chip shade="main" color-scheme="purple">purple</Chip>
<Chip shade="main" color-scheme="red">red</Chip>
<Chip shade="main" color-scheme="royal">royal</Chip>
<Chip shade="main" color-scheme="seafoam">seafoam</Chip>
<Chip shade="main" color-scheme="teal">teal</Chip>
<Chip shade="main" color-scheme="yellow">yellow</Chip>

Custom color schemes

If none of the default colors apply to your use case, you can provide your own combination of bg-color and text-color props in order to customize the chip.

purple + whiteblue + ice

<Chip bg-color="purple-500" text-color="white">purple + white</Chip>
<Chip bg-color="blue-500" text-color="ice-500">blue + ice</Chip>

WARNING

When using custom colors, the color and shade props will have no effect.

Roundness

The roundness of the Chip can be controlled via the radius property. The default value is standard but it can be set to none to not apply any border radius or pill to set it to the max value.

standardnonepill

<Chip color-scheme="blue" radius="standard">standard</Chip>
<Chip color-scheme="blue" radius="none">none</Chip>
<Chip color-scheme="blue" radius="pill">pill</Chip>

Sizes

You can control the size of the chip by setting size to either small or medium.

small chipmedium chip

<Chip color-scheme="purple" size="small">small chip</Chip>
<Chip color-scheme="purple" size="medium">medium chip</Chip>

Removable chips

Chips can set to be removable as well by setting the isRemovable property to true. You can then listen to the remove event that is triggered once the remove button is clicked.

removable

Removed was clicked 0 times

WARNING

Notice that the chip won't remove itself, so you still have to manage its display via v-if or v-show.

<Chip color-scheme="royal" @remove="removedCount++" is-removable>removable</Chip>

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <Chip />