104Get started
HextaUI

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.

designengineeringresearchmarketingcustomer-successops
"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>
  )
}

Add this example

This adds the example as components/examples/badge/removable.tsx, together with the Badge component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/badge-removable.json

To add only the component, follow the Badge installation.

Props in this example

The Badge props this example sets, from the API reference.

Badge

PropTypeDefault
onOpenChangeCompleteCalled after the exit animation finishes. Remove the item from your data here.
(open: boolean) => void–

Every prop is in the Badge API reference.

More Badge examples

See them all, with keyboard support and accessibility notes, on the Badge page.

Related components