ButtonGroupInputGroup() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ ButtonGroupInputGroup() — ui Function Reference

Dependency Diagram

graph TD
  ea7f85b3_5e57_f76f_f637_dc43e0b7074f["ButtonGroupInputGroup()"]
  359c5325_aa31_8810_34db_2443f7ea524b["button-group-input-group.tsx"]
  ea7f85b3_5e57_f76f_f637_dc43e0b7074f -->|defined in| 359c5325_aa31_8810_34db_2443f7ea524b
  style ea7f85b3_5e57_f76f_f637_dc43e0b7074f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/button-group-input-group.tsx lines 19–59

export default function ButtonGroupInputGroup() {
  const [voiceEnabled, setVoiceEnabled] = React.useState(false)

  return (
    <ButtonGroup className="[--radius:9999rem]">
      <ButtonGroup>
        <Button variant="outline" size="icon">
          <PlusIcon />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <InputGroup>
          <InputGroupInput
            placeholder={
              voiceEnabled ? "Record and send audio..." : "Send a message..."
            }
            disabled={voiceEnabled}
          />
          <InputGroupAddon align="inline-end">
            <Tooltip>
              <TooltipTrigger
                render={
                  <InputGroupButton
                    onClick={() => setVoiceEnabled(!voiceEnabled)}
                    size="icon-xs"
                    data-active={voiceEnabled}
                    className="data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100"
                    aria-pressed={voiceEnabled}
                  />
                }
              >
                <AudioLinesIcon />
              </TooltipTrigger>
              <TooltipContent>Voice Mode</TooltipContent>
            </Tooltip>
          </InputGroupAddon>
        </InputGroup>
      </ButtonGroup>
    </ButtonGroup>
  )
}