Chips

  1. <va-chip
  2.  icon="brandico brandico-facebook"
  3.  icon-right="iconicstroke iconicstroke-info"
  4. >
  5.  Plus chip
  6. </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.

  1. <va-badge
  2.  outline 
  3.  color="warning"
  4. >
  5.  On Hold
  6. </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.

  1. <va-tag 
  2.  v-model="isCloseableTagVisible"
  3.  closeable
  4. >
  5.  Tag
  6. </va-tag>
  1. export default {
  2.   data () {
  3.     return {
  4.       isCloseableTagVisible: true
  5.     }
  6.   }
  7. }

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!