Chips

Chips show the status of something in a compact form.

Variants

Chips come in various colors to denote different types of information.

<template>
  <DemoGrid>
    <ci-chip
      v-for="variant in variants"
      :key="variant"
      :variant="variant"
    >
      <template>
        {{variant}}
      </template>
    </ci-chip>
  </DemoGrid>
</template>
<script>
export default {
  data() {
    return {
      variants: [ 'default', 'danger', 'warning', 'success', 'muted', 'dark', 'signal' ]
    }
  }
}
</script>