Skip to content
Yuzur1ha Open

Component referenceDraft

Badge

Badge adds a compact status, count or annotation beside existing content.

Updated

Design notes

Keep its meaning available in text rather than relying on color alone. A badge does not replace the underlying action or label.

Playground

Playgrounddemo.tsx
5AMNew

content/components/badge/demo.tsx

import { useState } from "react"
import { Avatar, Badge, Button, Checkbox, NumberField } from "@yuzur1ha/ui"
export function BadgeDemo() {
  const [count, setCount] = useState<number | null>(5)
  const [showZero, setShowZero] = useState(false)
  const notificationCount = Math.max(0, Math.min(150, Math.trunc(count ?? 0)))
  return (
    <>
      <div className="demo-row demo-badges">
        <Badge
          count={notificationCount}
          showZero={showZero}
          label={`${notificationCount} unread messages`}
        >
          <Button appearance="secondary">Inbox</Button>
        </Badge>
        <Badge variant="dot" label="Available" position="bottom-end">
          <Avatar name="Alex Morgan" size="small" />
        </Badge>
        <Badge variant="label" content="New" label="New release" tone="danger">
          <Button appearance="secondary">Releases</Button>
        </Badge>
      </div>
      <NumberField
        label="Notification count"
        value={count}
        onValueChange={setCount}
        min={0}
        max={150}
        incrementLabel="Increase notifications"
        decrementLabel="Decrease notifications"
      />
      <Checkbox
        label="Show zero"
        checked={showZero}
        onChange={(event) => setShowZero(event.target.checked)}
      />
    </>
  )
}

API

Badge

A count, dot or text indicator attached to child content. Native span attributes and ref apply to the outer wrapper.

BadgeProps
PropertyTypeRequiredDefaultDescription
childrenReactNodeYes—Anchor content that remains interactive when the indicator is hidden.
labelstringYes—Accessible indicator label; also the fallback text for variant="label".
variant"label" | "count" | "dot"No"count"Choose a count, a dot or a text label.
countnumberNo0Non-negative integer count, used by the count variant.
maxnumberNo99Positive integer display cap. Larger counts display max followed by +.
contentstringNo—Visible text for the label variant; falls back to label.
showZerobooleanNofalseKeep a zero-count indicator visible.
invisiblebooleanNofalseHide the indicator while preserving its child content.
position"top-end" | "top-start" | "bottom-end" | "bottom-start"No"top-end"Corner where the indicator is attached to its anchor.
tone"default" | "danger"No"default"Indicator palette: default ink or danger.
classNamestringNo""Additional classes applied to the component’s documented root or control.
idstringNo—DOM identifier for the rendered element.
refRef<HTMLSpanElement>No—Ref to the component’s documented DOM element.

No custom imperative methods. Event callbacks are listed as properties.