# Input group: Button

> `<InputGroupButton />` is a ghost button sized to fit inside the field. Its corners are concentric with the group's, and it gets its own focus ring.

Example: https://hextaui.com/docs/input-group/examples/button
Component docs: https://hextaui.com/docs/input-group.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/input-group-button.json
```

This adds `components/examples/input-group/button.tsx` with the Input group component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/input-group/button.tsx"
"use client"

import * as React from "react"
import { IconCheck, IconCopy, IconX } from "@tabler/icons-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
} from "@/components/ui/input-group"

export function InputGroupButtonDemo() {
  const [copied, setCopied] = React.useState(false)
  const [query, setQuery] = React.useState("button group")

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <InputGroup>
        <InputGroupInput
          readOnly
          defaultValue="https://hextaui.com/docs/input-group"
          aria-label="Share link"
        />
        <InputGroupAddon align="inline-end">
          <InputGroupButton
            size="icon-xs"
            aria-label={copied ? "Copied" : "Copy link"}
            onClick={async () => {
              await navigator.clipboard
                ?.writeText("https://hextaui.com/docs/input-group")
                .catch(() => {})
              setCopied(true)
              setTimeout(() => setCopied(false), 1500)
            }}
          >
            {copied ? <IconCheck /> : <IconCopy />}
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
      <InputGroup>
        <InputGroupInput
          value={query}
          onChange={(event) => setQuery(event.target.value)}
          placeholder="Search components…"
          aria-label="Search components"
        />
        <InputGroupAddon align="inline-end">
          {query ? (
            <InputGroupButton
              size="icon-xs"
              aria-label="Clear search"
              onClick={() => setQuery("")}
            >
              <IconX />
            </InputGroupButton>
          ) : null}
          <InputGroupButton variant="secondary">Search</InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}
```

## Props in this example

### InputGroupInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `readOnly` | `boolean` | `false` |  |

### InputGroupAddon

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` |  |

### InputGroupButton

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"` | `"ghost"` |  |
| `size` | `"xs" \| "sm" \| "icon-xs" \| "icon-sm"` | `"xs"` |  |

## More Input group examples

- [Icon](https://hextaui.com/docs/input-group/examples/icon.md)
- [Clear](https://hextaui.com/docs/input-group/examples/clear.md)
- [Character count](https://hextaui.com/docs/input-group/examples/count.md)
- [Text](https://hextaui.com/docs/input-group/examples/text.md)
- [Keyboard hint](https://hextaui.com/docs/input-group/examples/kbd.md)
- [Textarea](https://hextaui.com/docs/input-group/examples/textarea.md)
- [Header](https://hextaui.com/docs/input-group/examples/block-start.md)
- [Password](https://hextaui.com/docs/input-group/examples/password.md)
- [Sizes](https://hextaui.com/docs/input-group/examples/sizes.md)
- [Invalid](https://hextaui.com/docs/input-group/examples/invalid.md)
- [Disabled](https://hextaui.com/docs/input-group/examples/disabled.md)
- [Loading](https://hextaui.com/docs/input-group/examples/loading.md)
- [Dropdown](https://hextaui.com/docs/input-group/examples/dropdown.md)
- [Long content](https://hextaui.com/docs/input-group/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/input-group/examples/rtl.md)