104Get started
HextaUI

Badge: Controlled

Pass open and onOpenChange to own the visibility. Setting open back to true brings the badge back with an enter animation.

Beta features on
"use client"

import * as React from "react"

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

export function BadgeControlled() {
  const [open, setOpen] = React.useState(true)

  return (
    <div className="flex flex-wrap items-center justify-center gap-2">
      <Badge variant="warning" open={open} onOpenChange={setOpen}>
        Beta features on
        <BadgeClose />
      </Badge>
      <Button
        variant="outline"
        size="sm"
        disabled={open}
        onClick={() => setOpen(true)}
      >
        Restore
      </Button>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/badge-controlled.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
variantColors the dot and icons in outline, or the surface in solid.
"default" | "success" | "info" | "warning" | "destructive""default"
openControlled visibility.
boolean–
onOpenChangeCalled when BadgeClose is activated.
(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