104Get started
HextaUI

Badge: Long content

A badge never grows wider than its container. Long labels truncate with an ellipsis while icons and the close button stay visible.

SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious[email protected]
import { IconCheck } from "@tabler/icons-react"

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

export function BadgeLongContent() {
  return (
    <div className="flex w-56 max-w-full flex-col items-start gap-2">
      <Badge>
        SupercalifragilisticexpialidociousSupercalifragilisticexpialidocious
      </Badge>
      <Badge variant="success">
        <IconCheck data-icon="inline-start" />
        [email protected]
        <BadgeClose />
      </Badge>
    </div>
  )
}

Add this example

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

pnpm dlx shadcn@latest add https://hextaui.com/r/badge-long-content.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"

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