Badge

The Badge component is used to show a status badge for an entity.

Usage

Draft Pending Completed Error In Progress

<template>
  <Badge>Draft</Badge>
  <Badge color="yellow">Pending</Badge>
  <Badge color="green">Completed</Badge>
  <Badge color="red">Error</Badge>
  <Badge color="blue">In Progress</Badge>
  <!-- using colorMap and label -->
  <Badge :colorMap="colorMap" label="Success" />
  <Badge :colorMap="colorMap" label="Warning" />
  <Badge :colorMap="colorMap" label="Info" />
</template>

<script setup>
import { Badge } from 'jingrow-ui'
let colorMap = {
  Success: 'green',
  Warning: 'yellow',
  Info: 'blue',
}
</script>

Props

Name	Default	Value	Description
`color`	`'gray'`	`gray \| yellow \| green \| red \| blue`
`colorMap`	`null`	`Object`	An object containing label as key and color as value
`label`	`null`	`String`	This must be passed when using `colorMap`

1.7 KiB Raw Blame History

Badge

Usage

Props

1.7 KiB

Raw Blame History