ButtonGroupExamples() — ui Function Reference

Architecture documentation for the ButtonGroupExamples() function in preview.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ButtonGroupExamples() — ui Function Reference

Dependency Diagram

graph TD
  e3d02b1d_1ad9_2148_29dc_2dea8a25828e["ButtonGroupExamples()"]
  f02a92c6_0fdc_9231_5419_752092d638ff["preview.tsx"]
  e3d02b1d_1ad9_2148_29dc_2dea8a25828e -->|defined in| f02a92c6_0fdc_9231_5419_752092d638ff
  style e3d02b1d_1ad9_2148_29dc_2dea8a25828e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/preview.tsx lines 326–657

function ButtonGroupExamples() {
  const [label, setLabel] = React.useState("personal")

  return (
    <Example title="Button Group" className="items-center justify-center">
      <div className="flex flex-col gap-6">
        <ButtonGroup>
          <ButtonGroup className="hidden sm:flex">
            <Button variant="outline" size="icon-sm" aria-label="Go Back">
              <IconPlaceholder
                lucide="ArrowLeftIcon"
                tabler="IconArrowLeft"
                hugeicons="ArrowLeft01Icon"
                phosphor="ArrowLeftIcon"
                remixicon="RiArrowLeftLine"
              />
            </Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button variant="outline" size="sm">
              Archive
            </Button>
            <Button variant="outline" size="sm">
              Report
            </Button>
          </ButtonGroup>
          <ButtonGroup>
            <Button variant="outline" size="sm">
              Snooze
            </Button>
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <Button
                    variant="outline"
                    size="icon-sm"
                    aria-label="More Options"
                  />
                }
              >
                <IconPlaceholder
                  lucide="ChevronDownIcon"
                  tabler="IconChevronDown"
                  hugeicons="ArrowDown01Icon"
                  phosphor="CaretDownIcon"
                  remixicon="RiArrowDownSLine"
                />
              </DropdownMenuTrigger>
              <DropdownMenuContent align="end" className="w-48">
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <IconPlaceholder
                      lucide="MailCheckIcon"
                      tabler="IconMailCheck"
                      hugeicons="MailValidation01Icon"
                      phosphor="EnvelopeIcon"
                      remixicon="RiMailLine"
                    />
                    Mark as Read
                  </DropdownMenuItem>
                  <DropdownMenuItem>
                    <IconPlaceholder
                      lucide="ArchiveIcon"
                      tabler="IconArchive"
                      hugeicons="ArchiveIcon"
                      phosphor="ArchiveIcon"
                      remixicon="RiArchiveLine"
                    />
                    Archive
                  </DropdownMenuItem>
                </DropdownMenuGroup>
                <DropdownMenuSeparator />
                <DropdownMenuGroup>
                  <DropdownMenuItem>
                    <IconPlaceholder
                      lucide="ClockIcon"
                      tabler="IconClock"
                      hugeicons="ClockIcon"
                      phosphor="ClockIcon"
                      remixicon="RiTimeLine"
                    />