# Badge: Removable

> Add a `<BadgeClose />` to make a badge removable. It shrinks closed and its neighbours slide into the gap, then focus moves to the next close button. Remove the item from your data in `onOpenChangeComplete` so the exit animation can finish first.

Example: https://hextaui.com/docs/badge/examples/removable
Component docs: https://hextaui.com/docs/badge.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/badge-removable.json
```

This adds `components/examples/badge/removable.tsx` with the Badge component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/badge/removable.tsx"
"use client"

import * as React from "react"

import { Badge, BadgeClose } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

const initialTags = [
  "design",
  "engineering",
  "research",
  "marketing",
  "customer-success",
  "ops",
]

export function BadgeRemovable() {
  const [tags, setTags] = React.useState(initialTags)
  const [next, setNext] = React.useState(1)

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <div className="flex flex-wrap items-center gap-2">
        {tags.map((tag) => (
          <Badge
            key={tag}
            onOpenChangeComplete={(open) => {
              if (!open) {
                setTags((current) => current.filter((item) => item !== tag))
              }
            }}
          >
            {tag}
            <BadgeClose />
          </Badge>
        ))}
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setTags((current) => [...current, `tag-${next}`])
            setNext((value) => value + 1)
          }}
        >
          Add tag
        </Button>
        <Button variant="ghost" size="sm" onClick={() => setTags(initialTags)}>
          Reset
        </Button>
      </div>
    </div>
  )
}
```

## Props in this example

### Badge

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onOpenChangeComplete` | `(open: boolean) => void` | – | Called after the exit animation finishes. Remove the item from your data here. |

## More Badge examples

- [Variants and appearances](https://hextaui.com/docs/badge/examples/variants.md)
- [Sizes](https://hextaui.com/docs/badge/examples/sizes.md)
- [Controlled](https://hextaui.com/docs/badge/examples/controlled.md)
- [Counts](https://hextaui.com/docs/badge/examples/counts.md)
- [Interactive](https://hextaui.com/docs/badge/examples/interactive.md)
- [Long content](https://hextaui.com/docs/badge/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/badge/examples/rtl.md)