Badge

Status dots with text, and numeric or dot count badges anchored to their children's corner.

import { Badge } from '@lobehub/ui/base-ui';

NPM Source Edit

Feedback

Basic

Loading preview

APIs

Badge properties

color: string
count: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
dot: boolean
Defaults to false.
offset: [number, number]
overflowCount: number
Defaults to 99.
ref: null | (instance: HTMLSpanElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLSpanElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
showZero: boolean
Defaults to false.
size: 'small' | 'default'
Defaults to "default".
status: 'default' | 'success' | 'warning' | 'error' | 'processing'
text: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.

Badge renders a native <span>. All standard span HTML attributes including className, style, data-*, and ref are forwarded to the root element.

Status mode

Passing status, or text without children, renders an inline dot plus label. status="processing" adds a pulsing ring around the dot. color overrides the dot color for any status.

Count mode

Wrapping children anchors a pill to the top-right corner. count accepts a number (hidden at 0 unless showZero, capped at overflowCount with a + suffix) or any ReactNode. dot renders a small circle instead of the count. offset nudges the pill by [x, y] pixels. With no children, the pill renders inline instead of being absolutely positioned.

Migrating from antd Badge

import { Badge } from '@lobehub/ui/base-ui';

<Badge count={5}>
  <Avatar />
</Badge>;

Badge.Ribbon, title, and gradient color presets are not supported.