# Button group: Feedback inside a group

> When a button’s label changes width during loading, success or error, the segments after it slide along instead of jumping.

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

## Add this example

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

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

## Source

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

import * as React from "react"
import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import { ButtonGroup, ButtonGroupSeparator } from "@/components/ui/button-group"

function wait(ms: number) {
  return new Promise<void>((resolve) => setTimeout(resolve, ms))
}

async function fail(ms: number) {
  await wait(ms)
  throw new Error("Request failed")
}

export function ButtonGroupFeedback() {
  const [shouldFail, setShouldFail] = React.useState(false)

  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <ButtonGroup aria-label="Save changes">
        <Button
          feedback
          loadingLabel="Saving changes"
          successLabel="All changes saved"
          errorLabel="Couldn't save"
          onClick={() => (shouldFail ? fail(900) : wait(900))}
        >
          Save
        </Button>
        <ButtonGroupSeparator />
        <Button size="icon" aria-label="More save options">
          <IconChevronDown />
        </Button>
      </ButtonGroup>
      <label className="flex items-center gap-2 text-sm text-muted-foreground">
        <input
          type="checkbox"
          checked={shouldFail}
          onChange={(event) => setShouldFail(event.target.checked)}
        />
        Fail next save
      </label>
    </div>
  )
}
```

## More Button group examples

- [Sizes](https://hextaui.com/docs/button-group/examples/sizes.md)
- [Split button](https://hextaui.com/docs/button-group/examples/split.md)
- [Separators](https://hextaui.com/docs/button-group/examples/player.md)
- [Vertical](https://hextaui.com/docs/button-group/examples/vertical.md)
- [Nested groups](https://hextaui.com/docs/button-group/examples/nested.md)
- [With text and an input](https://hextaui.com/docs/button-group/examples/input.md)
- [Disabled and invalid](https://hextaui.com/docs/button-group/examples/disabled.md)
- [Full width](https://hextaui.com/docs/button-group/examples/full-width.md)
- [As a fieldset](https://hextaui.com/docs/button-group/examples/fieldset.md)
- [Right to left](https://hextaui.com/docs/button-group/examples/rtl.md)