UxPill

components/ux/Pill.vue

Read-only toned badge for categories and statuses — grape, leaf, grey, or warn.

production
Scenarios
era: brand v1.5project: qmapsubject: componentsdeprecatedan unusually long category label that should still read as one pill
components/ux/Pill.vue

Usage

<UxPill tone = "grey" > Content here </UxPill>

Props

PropTypeDefaultDescription
toneString'grey'grape, leaf, grey, or warn

Slots

SlotDescription
defaultBadge text

Related

Qpoint Brand Style Guide