ButtonGroupExamples() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ButtonGroupExamples() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/preview.tsx lines 326–649

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 asChild>
                <Button
                  variant="outline"
                  size="icon-sm"
                  aria-label="More Options"
                >
                  <IconPlaceholder
                    lucide="ChevronDownIcon"
                    tabler="IconChevronDown"
                    hugeicons="ArrowDown01Icon"
                    phosphor="CaretDownIcon"
                    remixicon="RiArrowDownSLine"
                  />
                </Button>
              </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"
                    />
                    Snooze
                  </DropdownMenuItem>