Badge: Right to left

Icons, the close button and the collapse animation follow the reading direction. Counts always read left to right.

مدفوعمباشرتصميم

import { IconCheck } from "@tabler/icons-react"

import { Badge, BadgeClose, BadgeCount, BadgeDot } from "@/components/ui/badge"

export function BadgeRtl() {
  return (
    <div dir="rtl" className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="success">
        <IconCheck data-icon="inline-start" />
        مدفوع
      </Badge>
      <Badge>
        <BadgeDot pulse />
        مباشر
      </Badge>
      <Badge>
        تصميم
        <BadgeClose />
      </Badge>
      <Badge>
        <BadgeCount value={120} />
      </Badge>
    </div>
  )
}

Add this example

This adds the example as components/examples/badge/rtl.tsx, together with the Badge component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/badge-rtl.json

To add only the component, follow the Badge installation.

Props in this example

The Badge props this example sets, from the API reference.

Badge

Prop	Type	Default
`variant`Colors the dot and icons in outline, or the surface in solid.	`"default" \| "success" \| "info" \| "warning" \| "destructive"`	`"default"`

BadgeDot

Prop	Type	Default
`pulse`Adds a ping animation for live states. Off when reduced motion is on.	`boolean`	`false`

BadgeCount

Prop	Type	Default
`value`Negative and non-finite values show 0.	`number`	`–`

Every prop is in the Badge API reference.

More Badge examples

See them all, with keyboard support and accessibility notes, on the Badge page.