Chip

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.

Installation

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QChip'
    ]
  }
}

Usage

Basic
Dense

Custom sizes (below) have been introduced in v1.2.2+:

Custom size
Square
Outline
Clickable
Selected
Removable
Long label truncation

QChip API