Badge

Properties

• Label
• Color
  • success
  • error
  • info
  • warning

Shoelace

https://shoelace.style/components/badge

<sl-badge variant="primary" pill>Primary</sl-badge>
<sl-badge variant="success" pill>Success</sl-badge>
<sl-badge variant="neutral" pill>Neutral</sl-badge>
<sl-badge variant="warning" pill>Warning</sl-badge>
<sl-badge variant="danger" pill>Danger</sl-badge>

vue-dsfr

Badge - Badge

<template>
  <DsfrBadge :label="label" :small="small" :type="type" :no-icon="noIcon" />
</template>

Vuetify

Chips

On Vuetify the colors are defined by Material Design.

<v-chip class="ma-2" > Default </v-chip>
<v-chip class="ma-2" color="primary" > Primary </v-chip>
<v-chip class="ma-2" color="secondary" > Secondary </v-chip>
<v-chip class="ma-2" color="red" text-color="white" > Red Chip </v-chip>
<v-chip class="ma-2" color="green" text-color="white" > Green Chip </v-chip>