ButtonGroupPopover() — ui Function Reference

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

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ButtonGroupPopover() — ui Function Reference

Dependency Diagram

graph TD
  465b052d_48b6_1779_36df_586c94bcd1c5["ButtonGroupPopover()"]
  6e421a7d_44d8_b2c7_0dea_dc71d38cb505["button-group-popover.tsx"]
  465b052d_48b6_1779_36df_586c94bcd1c5 -->|defined in| 6e421a7d_44d8_b2c7_0dea_dc71d38cb505
  style 465b052d_48b6_1779_36df_586c94bcd1c5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/button-group-popover.tsx lines 15–51

export default function ButtonGroupPopover() {
  return (
    <ButtonGroup>
      <Button variant="outline">
        <BotIcon /> Copilot
      </Button>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="icon" aria-label="Open Popover">
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
        <PopoverContent align="end" className="rounded-xl text-sm">
          <PopoverHeader>
            <PopoverTitle>Start a new task with Copilot</PopoverTitle>
            <PopoverDescription>
              Describe your task in natural language.
            </PopoverDescription>
          </PopoverHeader>
          <Field>
            <FieldLabel htmlFor="task" className="sr-only">
              Task Description
            </FieldLabel>
            <Textarea
              id="task"
              placeholder="I need to..."
              className="resize-none"
            />
            <FieldDescription>
              Copilot will open a pull request for review.
            </FieldDescription>
          </Field>
        </PopoverContent>
      </Popover>
    </ButtonGroup>
  )
}