Badge

Stable

Small status indicator to annotate counts, labels, or state.

Installation

npm install @xaui/native

Import

import { Badge } from '@xaui/native/badge'

Basic Usage

Minimal example showing the component with its default configuration.

import { Badge } from '@xaui/native/badge'

export function Example() {
  return <Badge />
}

Basic Count

Attach a numeric badge to any element.

import { Badge } from '@xaui/native/badge'
import { IconButton } from '@xaui/native/button'
import { NotificationsIcon } from '@xaui/icons/notifications'

export function BasicExample() {
  return (
    <Badge content={3}>
      <IconButton icon={<NotificationsIcon />} onPress={() => {}} />
    </Badge>
  )
}

Dot Indicator

Use isDot for a minimal status indicator with no content.

import { Badge } from '@xaui/native/badge'
import { Avatar } from '@xaui/native/avatar'
import { Row } from '@xaui/native/view'

export function DotExample() {
  return (
    <Row gap={16}>
      <Badge isDot themeColor="success">
        <Avatar label="Online" />
      </Badge>
      <Badge isDot themeColor="danger">
        <Avatar label="Busy" />
      </Badge>
      <Badge isDot themeColor="default">
        <Avatar label="Away" />
      </Badge>
    </Row>
  )
}

Variants

Four visual styles available for badges.

import { Badge } from '@xaui/native/badge'
import { IconButton } from '@xaui/native/button'
import { BellIcon } from '@xaui/icons/bell'
import { Row } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Row gap={24}>
      <Badge content={4} variant="solid" themeColor="primary">
        <IconButton icon={<BellIcon />} onPress={() => {}} />
      </Badge>
      <Badge content={4} variant="flat" themeColor="primary">
        <IconButton icon={<BellIcon />} onPress={() => {}} />
      </Badge>
      <Badge content={4} variant="faded" themeColor="primary">
        <IconButton icon={<BellIcon />} onPress={() => {}} />
      </Badge>
      <Badge content={4} variant="shadow" themeColor="primary">
        <IconButton icon={<BellIcon />} onPress={() => {}} />
      </Badge>
    </Row>
  )
}

Placements

Position the badge on any corner of the wrapped element.

import { Badge } from '@xaui/native/badge'
import { Avatar } from '@xaui/native/avatar'
import { Row } from '@xaui/native/view'

export function PlacementsExample() {
  return (
    <Row gap={24}>
      <Badge content="1" placement="top-right">
        <Avatar label="TR" />
      </Badge>
      <Badge content="2" placement="top-left">
        <Avatar label="TL" />
      </Badge>
      <Badge content="3" placement="bottom-right">
        <Avatar label="BR" />
      </Badge>
      <Badge content="4" placement="bottom-left">
        <Avatar label="BL" />
      </Badge>
    </Row>
  )
}

Visibility Toggle

Use isInvisible to conditionally hide the badge.

import { useState } from 'react'
import { Badge } from '@xaui/native/badge'
import { Button, IconButton } from '@xaui/native/button'
import { NotificationsIcon } from '@xaui/icons/notifications'
import { Row } from '@xaui/native/view'

export function VisibilityExample() {
  const [hasNotif, setHasNotif] = useState(true)

  return (
    <Row gap={16} alignItems="center">
      <Badge content={5} isInvisible={!hasNotif}>
        <IconButton icon={<NotificationsIcon />} onPress={() => {}} />
      </Badge>
      <Button onPress={() => setHasNotif(v => !v)}>
        {hasNotif ? 'Clear' : 'Notify'}
      </Button>
    </Row>
  )
}