Badge

Import

import { Badge } from 'heroui-native-pro';

Anatomy

<Badge.Anchor>
  ...
  <Badge>
    <Badge.Label>...</Badge.Label>
  </Badge>
</Badge.Anchor>

• Badge: Root container. Renders as a dot when no children are passed, or as a pill with content otherwise. Supports color, variant, size, and placement props. When used inside Badge.Anchor, it is absolutely positioned at the specified corner.
• Badge.Background: Optional theme-aware background container rendered behind the badge surface. Mounted automatically for the variants whose background resolves to the default color when the active theme registers default background content (e.g. glass). Replace or remove it via the background prop.
• Badge.Anchor: Relative wrapper that positions the Badge over another element (e.g. Avatar, Icon).
• Badge.Label: Text content inside the badge. Automatically used when string or number children are passed to Badge.

Usage

Basic usage

Wrap the anchored element and the badge in Badge.Anchor. Pass a string or number as children to render a pill.

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge color="danger" size="sm">
    5
  </Badge>
</Badge.Anchor>

Dot badge

Omit children to render a dot indicator.

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge color="success" />
</Badge.Anchor>

Colors

Switch the badge color with the color prop.

<Badge color="default">5</Badge>
<Badge color="accent">5</Badge>
<Badge color="success">5</Badge>
<Badge color="warning">5</Badge>
<Badge color="danger">5</Badge>

Variants

Change the visual style with the variant prop.

<Badge variant="primary" color="accent">5</Badge>
<Badge variant="secondary" color="accent">5</Badge>
<Badge variant="soft" color="accent">5</Badge>

Sizes

Control the badge size with the size prop.

<Badge size="sm">5</Badge>
<Badge size="md">5</Badge>
<Badge size="lg">5</Badge>

Placements

Position the badge at any corner of its anchor with the placement prop. Only takes effect when used inside Badge.Anchor.

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge placement="top-right" />
</Badge.Anchor>

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge placement="top-left" />
</Badge.Anchor>

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge placement="bottom-right" />
</Badge.Anchor>

<Badge.Anchor>
  <Avatar>...</Avatar>
  <Badge placement="bottom-left" />
</Badge.Anchor>

Custom label

Compose the badge content explicitly with Badge.Label for full control over the text element.

<Badge color="danger" size="sm">
  <Badge.Label>99+</Badge.Label>
</Badge>

Example

import { Avatar } from 'heroui-native';
import { Badge } from 'heroui-native-pro';
import { View } from 'react-native';

export default function BadgeExample() {
  return (
    <View className="flex-row items-center gap-6">
      <Badge.Anchor>
        <Avatar alt="Avatar">
          <Avatar.Image source={{ uri: 'https://i.pravatar.cc/100?u=1' }} />
          <Avatar.Fallback>JD</Avatar.Fallback>
        </Avatar>
        <Badge color="danger" size="sm">
          5
        </Badge>
      </Badge.Anchor>

      <Badge.Anchor>
        <Avatar alt="Avatar">
          <Avatar.Image source={{ uri: 'https://i.pravatar.cc/100?u=2' }} />
          <Avatar.Fallback>AB</Avatar.Fallback>
        </Avatar>
        <Badge color="accent" size="sm">
          New
        </Badge>
      </Badge.Anchor>

      <Badge.Anchor>
        <Avatar alt="Avatar">
          <Avatar.Image source={{ uri: 'https://i.pravatar.cc/100?u=3' }} />
          <Avatar.Fallback>CD</Avatar.Fallback>
        </Avatar>
        <Badge color="success" placement="bottom-right" size="sm" />
      </Badge.Anchor>
    </View>
  );
}

API Reference

Badge

BadgeSize

BadgeColor

BadgeVariant

BadgePlacement

AnimationRootDisableAll

Animation configuration for the Badge root. Can be:

• "disable-all": Disable all animations including children (cascades down)
• undefined: Use default animations

Badge.Background

Absolute-fill container rendered behind the badge surface. With no children, the active library theme decides the default content (e.g. a glass blur layer); pass children to host custom content with the same positioning and clipping.

Badge.Anchor

Badge.Label

Hooks

useBadge

Hook to access the Badge context. Must be used within a Badge component.

import { useBadge } from 'heroui-native-pro';

const { size, color, variant, isDot } = useBadge();

Returns: BadgeContextValue