Badge

Badges are used to display important information or status in a compact, visually distinct way. They can be used to show counts, status indicators, or important labels.

Example

Default

Success

Warning

Danger

Props

Prop	Type	Default value	Description
Prop text	Type ReactNode	Default value undefined	Description The text or content to display in the badge
Prop state	Type "default" \| "success" \| "neutral" \| "danger" \| "disabled" \| "warning" \| "info"	Default value "default"	Description The visual state of the badge
Prop size	Type "sm" \| "md"	Default value "md"	Description The size of the badge
Prop type	Type "opaque" \| "solid"	Default value "opaque"	Description The visual type of the badge
Prop icon	Type IconName	Default value undefined	Description Icon name to display in the badge
Prop iconDir	Type "left" \| "right"	Default value "left"	Description Direction of the icon relative to the text
Prop dismissible	Type boolean	Default value false	Description Whether the badge can be dismissed with a close button
Prop onClose	Type (e: MouseEvent<HTMLOrSVGElement>) => void	Default value undefined	Description Callback function called when the dismissible badge is closed
Prop ellipsisContent	Type boolean	Default value false	Description Whether to truncate long content with ellipsis

Quick start

Use Badge to display status or labels:

<Badge text="New" state="success" />
<Badge text="Warning" state="warning" />
<Badge text="Error" state="danger" />

Text: Use Text for regular text content alongside badges
Icon: Use Icon inside badges for visual indicators
Button: Use badges with buttons to show counts or status
Table: Use badges in table cells to show status

Common use cases

Status indicator

Active

Pending

Error

Disabled

import { Badge } from '@clickhouse/click-ui'

function StatusBadge() {
return (
  <Badge text="Active" state="success" />
)
}

Badge with Icon

Starred

New

Alert

import { Badge } from '@clickhouse/click-ui'

function IconBadge() {
return (
  <Badge text="Starred" icon="star" state="warning" />
)
}

Dismissible badge

Dismissible Badge

import { Badge } from '@clickhouse/click-ui'
import { useState } from 'react'

function DismissibleBadge() {
const [show, setShow] = useState(true)

if (!show) return null

return (
  <Badge 
    text="Dismissible" 
    dismissible 
    onClose={() => setShow(false)} 
  />
)
}

Variants

States

Default

Success

Warning

Danger

Info

Neutral

Disabled

Types

Solid

Opaque

Sizes

Small

Medium

With icons

Left Icon

Right Icon

Dismissible

Title Avatar