ButtonGroupNested() — ui Function Reference

Architecture documentation for the ButtonGroupNested() function in button-group-nested.tsx from the ui codebase.

Function tsx Internationalization Dictionary calls 1

Entity Profile

Internationalization→ Dictionary→ ButtonGroupNested() — ui Function Reference

Dependency Diagram

graph TD
  e81ae8ac_862c_4a66_e53b_20c3ac841a88["ButtonGroupNested()"]
  c1d94cc0_fe1b_f253_c09d_03b05ba5fdd7["button-group-nested.tsx"]
  e81ae8ac_862c_4a66_e53b_20c3ac841a88 -->|defined in| c1d94cc0_fe1b_f253_c09d_03b05ba5fdd7
  d86d044b_774d_8144_73ef_c3802500a847["formatNumber()"]
  e81ae8ac_862c_4a66_e53b_20c3ac841a88 -->|calls| d86d044b_774d_8144_73ef_c3802500a847
  style e81ae8ac_862c_4a66_e53b_20c3ac841a88 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/button-group-nested.tsx lines 28–56

export function ButtonGroupNested() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]

  return (
    <ButtonGroup dir={t.dir}>
      <ButtonGroup>
        <Button variant="outline" size="sm">
          {formatNumber(1, t.locale)}
        </Button>
        <Button variant="outline" size="sm">
          {formatNumber(2, t.locale)}
        </Button>
        <Button variant="outline" size="sm">
          {formatNumber(3, t.locale)}
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline" size="icon-sm" aria-label={t.previous}>
          <ArrowLeftIcon className="rtl:rotate-180" />
        </Button>
        <Button variant="outline" size="icon-sm" aria-label={t.next}>
          <ArrowRightIcon className="rtl:rotate-180" />
        </Button>
      </ButtonGroup>
    </ButtonGroup>
  )
}