Back to Quasar

Chip

docs/src/pages/vue-components/chip.md

1.16.1838 B
Original Source

The QChip component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way.

Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too. They can also be closed or removed if configured so.

::: tip Also check out QBadge. :::

<DocApi file="QChip" />

Usage

<DocExample title="Basic" file="Basic" /> <DocExample title="Dense" file="Dense" /> <DocExample title="Custom size" file="Sizes" /> <DocExample title="Square" file="Square" /> <DocExample title="Outline" file="Outline" /> <DocExample title="Clickable" file="Clickable" /> <DocExample title="Selected" file="Selected" /> <DocExample title="Removable" file="Removable" /> <DocExample title="Long label truncation" file="LongLabel" />