Return to top
On this page

Badge

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

Usage

DraftPendingCompletedErrorIn ProgressSuccessWarningInfo
vue
<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 'frappe-ui'
let colorMap = {
  Success: 'green',
  Warning: 'yellow',
  Info: 'blue',
}
</script>

Props

NameDefaultValueDescription
color'gray'gray | yellow | green | red | blue
colorMapnullObjectAn object containing label as key and color as value
labelnullStringThis must be passed when using colorMap