Chips

Chips

<va-chip
 icon="brandico brandico-facebook"
 icon-right="iconicstroke iconicstroke-info"
>
 Plus chip
</va-chip>

Props

• value - Boolean - controls chip visibility.
• outline - Boolean.
• color - String (default: 'success') - use this property to set the color of the chip. We can choose one color from a set of theme colors (primary, secondary, info, error, warning).
• small - Boolean.
• icon - String - insert icon with defined class from the left side of the chip.
• iconRight - String - insert icon with defined class from the right side of the chip

Badges

Small chip with possibility to set color.

<va-badge
 outline 
 color="warning"
>
 On Hold
</va-badge>

Props

• color - String (default: 'success') - use this property to set the color of the badge. We can choose one color from a set of theme colors (primary, secondary, info, error, warning).
• outline - Boolean.

Tags

Normal closeable outline chip with possibility to set color.

<va-tag 
 v-model="isCloseableTagVisible"
 closeable
>
 Tag
</va-tag>

export default {
  data () {
    return {
      isCloseableTagVisible: true
    }
  }
}

Props

• value - Boolean - controls tag visibility.
• color - String (default: 'success') - use this property to set the color of the tag. We can choose one color from a set of theme colors (primary, secondary, info, error, warning).
• closeable - Boolean.

Find DEMOs here!