BadgeRtl() — ui Function Reference

Architecture documentation for the BadgeRtl() function in badge-rtl.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ BadgeRtl() — ui Function Reference

Dependency Diagram

graph TD
  5302ab83_4bc1_68e4_1f66_ec41cadbc1f8["BadgeRtl()"]
  9dfcbb7f_cd74_1220_6503_ad3b7a2ff6dc["badge-rtl.tsx"]
  5302ab83_4bc1_68e4_1f66_ec41cadbc1f8 -->|defined in| 9dfcbb7f_cd74_1220_6503_ad3b7a2ff6dc
  style 5302ab83_4bc1_68e4_1f66_ec41cadbc1f8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/badge-rtl.tsx lines 48–67

export function BadgeRtl() {
  const { dir, t } = useTranslation(translations, "ar")

  return (
    <div className="flex w-full flex-wrap justify-center gap-2" dir={dir}>
      <Badge>{t.badge}</Badge>
      <Badge variant="secondary">{t.secondary}</Badge>
      <Badge variant="destructive">{t.destructive}</Badge>
      <Badge variant="outline">{t.outline}</Badge>
      <Badge variant="secondary">
        <BadgeCheck data-icon="inline-start" />
        {t.verified}
      </Badge>
      <Badge variant="outline">
        {t.bookmark}
        <BookmarkIcon data-icon="inline-end" />
      </Badge>
    </div>
  )
}