ButtonGroupDemo() — ui Function Reference

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

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ ButtonGroupDemo() — ui Function Reference

Dependency Diagram

graph TD
  3a86f95e_a071_60b4_2467_2ad491d94d44["ButtonGroupDemo()"]
  4794c5ef_6048_c89c_fc10_6bd2b0b49234["button-group-demo.tsx"]
  3a86f95e_a071_60b4_2467_2ad491d94d44 -->|defined in| 4794c5ef_6048_c89c_fc10_6bd2b0b49234
  style 3a86f95e_a071_60b4_2467_2ad491d94d44 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/examples/rtl/components/button-group-demo.tsx lines 69–179

export function ButtonGroupDemo() {
  const context = useLanguageContext()
  const lang = context?.language === "he" ? "he" : "ar"
  const t = translations[lang]
  const [label, setLabel] = React.useState("personal")

  return (
    <div dir={t.dir}>
      <ButtonGroup>
        <ButtonGroup className="hidden sm:flex">
          <Button variant="outline" size="icon-sm" aria-label={t.goBack}>
            <ArrowLeftIcon className="rtl:rotate-180" />
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="sm">
            {t.archive}
          </Button>
          <Button variant="outline" size="sm">
            {t.report}
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button variant="outline" size="sm">
            {t.snooze}
          </Button>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button
                  variant="outline"
                  size="icon-sm"
                  aria-label={t.moreOptions}
                />
              }
            >
              <MoreHorizontalIcon />
            </DropdownMenuTrigger>
            <DropdownMenuContent
              align="start"
              dir={t.dir}
              data-lang={lang}
              className="w-44"
            >
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <MailCheckIcon />
                  {t.markAsRead}
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <ArchiveIcon />
                  {t.archive}
                </DropdownMenuItem>
              </DropdownMenuGroup>
              <DropdownMenuSeparator />
              <DropdownMenuGroup>
                <DropdownMenuItem>
                  <ClockIcon />
                  {t.snooze}
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <CalendarPlusIcon />
                  {t.addToCalendar}
                </DropdownMenuItem>
                <DropdownMenuItem>
                  <ListFilterIcon />
                  {t.addToList}
                </DropdownMenuItem>
                <DropdownMenuSub>
                  <DropdownMenuSubTrigger>
                    <TagIcon />
                    {t.labelAs}
                  </DropdownMenuSubTrigger>
                  <DropdownMenuPortal>
                    <DropdownMenuSubContent
                      side="left"
                      dir={t.dir}
                      data-lang={lang}
                    >
                      <DropdownMenuRadioGroup
                        value={label}