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
  5ea21058_0daa_7e8d_f3ab_613b88fc86db["BadgeRtl()"]
  b6a042c0_dfef_caa5_ae9d_d231d9d35441["badge-rtl.tsx"]
  5ea21058_0daa_7e8d_f3ab_613b88fc86db -->|defined in| b6a042c0_dfef_caa5_ae9d_d231d9d35441
  style 5ea21058_0daa_7e8d_f3ab_613b88fc86db fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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>
  )
}