Badge ​

A small label used to highlight status, counts, or metadata associated with an element.

Variants ​

Solid
Subtle
Outline
Ghost
vue
<script setup lang="ts">
import { Badge } from 'frappe-ui'
</script>

<template>
  <Badge variant="solid" size="lg">Solid</Badge>
  <Badge variant="subtle" size="lg">Subtle</Badge>
  <Badge variant="outline" size="lg">Outline</Badge>
  <Badge variant="ghost" size="lg">Ghost</Badge>
</template>

Themes ​

Solid
Subtle
Outline
Ghost
vue
<script setup lang="ts">
import { Badge } from 'frappe-ui'
</script>

<template>
  <Badge theme="gray" size='lg'>Solid</Badge>
  <Badge theme="blue" size='lg'>Subtle</Badge>
  <Badge theme="green" size='lg'>Outline</Badge>
  <Badge theme="orange" size='lg'>Ghost</Badge>
</template>

API Reference ​

Show types
typescript
interface Label {
  toString(): string
}

export interface BadgeProps {
  /** Visual color theme of the badge */
  theme?: 'gray' | 'blue' | 'green' | 'orange' | 'red'

  /** Controls the size of the badge */
  size?: 'sm' | 'md' | 'lg'

  /** Visual style of the badge */
  variant?: 'solid' | 'subtle' | 'outline' | 'ghost'

  /** Content displayed inside the badge */
  label?: Label | string | number
}
theme
= "gray"
"blue" | "red" | "green" | "gray" | "orange"

Visual color theme of the badge

size
= "md"
"md" | "sm" | "lg"

Controls the size of the badge

variant
= "subtle"
"subtle" | "outline" | "solid" | "ghost"

Visual style of the badge

label
string | number | Label

Content displayed inside the badge

prefix
—

Content shown before the badge label

default
—

Main badge content (overrides `label` prop)

suffix
—

Content shown after the badge label

AvatarBreadcrumbs