Badge

Badge displays contextual information such as surrounding state or product category. Its purpose should be be self-evident based on surrounding context.

import { Badge } from 'ui'
 
export function BadgeDemo() {
  return <Badge>Default</Badge>
}

Usage

import { Badge } from '@/components/ui/badge'

<Badge variant="default">Default</Badge>

Avoid altering the Badge style, such as text case or roundedness. Consistent implementation makes Badge immediately recognizable throughout Supabase for denoting state or category. Use or create another component for other use cases, such as compute size and status.

Keep Badge text to one or two words as it is designed to support other elements, not as a primary communication aid.

Badge is designed to stand out, so should be used sparingly.

Examples

States

import { Badge } from 'ui'
 
export function BadgeState() {
  return (
    <div className="flex flex-row gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="destructive">Destructive</Badge>
    </div>
  )
}

Secondary

A content-only variant similar to the text variant of Button.

import { Badge } from 'ui'
 
export function BadgeSecondary() {
  return <Badge variant="secondary">Secondary</Badge>
}