ButtonGroupWithFields() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ButtonGroupWithFields() — ui Function Reference

Dependency Diagram

graph TD
  cbf4ce9b_fef3_dc69_8c5c_8b479d3bad3c["ButtonGroupWithFields()"]
  d41ef55a_d021_eff9_a1f7_cf3a6ebe42df["button-group-example.tsx"]
  cbf4ce9b_fef3_dc69_8c5c_8b479d3bad3c -->|defined in| d41ef55a_d021_eff9_a1f7_cf3a6ebe42df
  style cbf4ce9b_fef3_dc69_8c5c_8b479d3bad3c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/button-group-example.tsx lines 344–386

function ButtonGroupWithFields() {
  return (
    <Example title="With Fields">
      <FieldGroup className="grid grid-cols-3 gap-4">
        <Field className="col-span-2">
          <Label htmlFor="width">Width</Label>
          <ButtonGroup>
            <InputGroup>
              <InputGroupInput id="width" />
              <InputGroupAddon className="text-muted-foreground">
                W
              </InputGroupAddon>
              <InputGroupAddon
                align="inline-end"
                className="text-muted-foreground"
              >
                px
              </InputGroupAddon>
            </InputGroup>
            <Button variant="outline" size="icon">
              <IconPlaceholder
                lucide="MinusIcon"
                tabler="IconMinus"
                hugeicons="MinusSignIcon"
                phosphor="MinusIcon"
                remixicon="RiSubtractLine"
              />
            </Button>
            <Button variant="outline" size="icon">
              <IconPlaceholder
                lucide="PlusIcon"
                tabler="IconPlus"
                hugeicons="PlusSignIcon"
                phosphor="PlusIcon"
                remixicon="RiAddLine"
              />
            </Button>
          </ButtonGroup>
        </Field>
      </FieldGroup>
    </Example>
  )
}