Badge

The Badge component displays a small visual indicator, perfect for status labels, tags, categories, or notification counts. It supports multiple variants and can render text via the label prop or custom content via children.

Preview

Installation

npx novaui-cli add badge

Import

import { Badge } from 'novaui-components'

Basic Usage

The Badge component accepts a label prop for text content or children for custom content:

import { Badge } from 'novaui-components'

export function BasicBadge() {
  return <Badge label="Badge" />
}

Variants

The Badge component supports four visual variants:

Default

The primary badge variant with a solid background:

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

Secondary

A subtle badge for less prominent labels:

<Badge variant="secondary" label="Secondary" />

Destructive

For error states or critical information:

<Badge variant="destructive" label="Destructive" />

Outline

A bordered badge with no background fill:

<Badge variant="outline" label="Outline" />

Custom Content

Use children instead of label for custom badge content:

import { Badge } from 'novaui-components'
import { Text } from 'react-native'

export function CustomBadge() {
  return (
    <Badge>
      <Text className="text-xs font-semibold text-primary-foreground">🚀 New</Text>
    </Badge>
  )
}

Props API

BadgeProps

Extends React.ComponentPropsWithoutRef<typeof View> and includes:

Best Practices

1. Use appropriate variants: Choose variants that convey the right meaning — default for general labels, destructive for errors or warnings, secondary for supplementary info, and outline for subtle indicators.

2. Keep labels short: Badges work best with concise text — one or two words, or small counts.

3. Consistent placement: Position badges consistently throughout your app for predictable UX.

4. Accessibility: When using badges for status, ensure the meaning is conveyed through text and not color alone.

Related Components

• Use Badge alongside Avatar for user status indicators
• Combine with Button for action counts or notifications
• Pair with list items or cards for category labels