Tag / Chip

Etiqueta descartable: el evento remove lo decide el consumidor. Variantes y tamaños sm / md / lg compartidos entre Angular y Vue.

Angular

Hipoteca

Al día

Pendiente

Vue

HipotecaAl díaPendiente

smlg

<flt-tag variant="info" removable (remove)="removeTag('Hipoteca')">Hipoteca</flt-tag>
<flt-tag variant="success" removable (remove)="removeTag('Al día')">Al día</flt-tag>
<flt-tag variant="warning" removable (remove)="removeTag('Pendiente')">Pendiente</flt-tag>

<!-- Tamaños -->
<flt-tag variant="info" size="sm" removable>sm</flt-tag>
<flt-tag variant="info" size="lg" removable>lg</flt-tag>

<FltTag
  v-for="t in tags"
  :key="t.label"
  :variant="t.variant"
  removable
  @remove="removeTag(t.label)"
>{{ t.label }}</FltTag>

<!-- Tamaños -->
<FltTag variant="info" size="sm" removable>sm</FltTag>
<FltTag variant="info" size="lg" removable>lg</FltTag>