Badge

const Badge: NamedExoticComponent<{ about?: string; accessKey?: string; aria-activedescendant?: string; aria-atomic?: Booleanish; aria-autocomplete?: "none" | "inline" | "both" | "list"; aria-braillelabel?: string; aria-brailleroledescription?: string; aria-busy?: Booleanish; aria-checked?: boolean | "mixed" | "false" | "true"; aria-colcount?: number; aria-colindex?: number; aria-colindextext?: string; aria-colspan?: number; aria-controls?: string; aria-current?: boolean | "location" | "page" | "false" | "true" | "step" | "date" | "time"; aria-describedby?: string; aria-description?: string; aria-details?: string; aria-disabled?: Booleanish; aria-dropeffect?: "none" | "link" | "copy" | "move" | "execute" | "popup"; aria-errormessage?: string; aria-expanded?: Booleanish; aria-flowto?: string; aria-grabbed?: Booleanish; aria-haspopup?: boolean | "grid" | "listbox" | "menu" | "false" | "true" | "dialog" | "tree"; aria-hidden?: Booleanish; aria-invalid?: boolean | "false" | "true" | "grammar" | "spelling"; aria-keyshortcuts?: string; aria-label?: string; aria-labelledby?: string; aria-level?: number; aria-live?: "off" | "assertive" | "polite"; aria-modal?: Booleanish; aria-multiline?: Booleanish; aria-multiselectable?: Booleanish; aria-orientation?: "horizontal" | "vertical"; aria-owns?: string; aria-placeholder?: string; aria-posinset?: number; aria-pressed?: boolean | "mixed" | "false" | "true"; aria-readonly?: Booleanish; aria-relevant?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"; aria-required?: Booleanish; aria-roledescription?: string; aria-rowcount?: number; aria-rowindex?: number; aria-rowindextext?: string; aria-rowspan?: number; aria-selected?: Booleanish; aria-setsize?: number; aria-sort?: "none" | "ascending" | "descending" | "other"; aria-valuemax?: number; aria-valuemin?: number; aria-valuenow?: number; aria-valuetext?: string; autoCapitalize?: "none" | string & object | "off" | "on" | "sentences" | "words" | "characters"; autoCorrect?: string; autoFocus?: boolean; autoSave?: string; children?: ReactNode; className?: string; color?: BadgeColor; content?: string; contentEditable?: "inherit" | Booleanish | "plaintext-only"; contextMenu?: string; dangerouslySetInnerHTML?: { __html: string | TrustedHTML; }; datatype?: string; defaultChecked?: boolean; defaultValue?: string | number | readonly string[]; dir?: string; draggable?: Booleanish; enterKeyHint?: "search" | "next" | "enter" | "done" | "go" | "previous" | "send"; exportparts?: string; hidden?: boolean; icon?: ReactNode; id?: string; inert?: boolean; inlist?: any; inputMode?: "text" | "none" | "search" | "tel" | "url" | "email" | "numeric" | "decimal"; is?: string; itemID?: string; itemProp?: string; itemRef?: string; itemScope?: boolean; itemType?: string; lang?: string; nonce?: string; onAbort?: ReactEventHandler<HTMLSpanElement>; onAbortCapture?: ReactEventHandler<HTMLSpanElement>; onAnimationEnd?: AnimationEventHandler<HTMLSpanElement>; onAnimationEndCapture?: AnimationEventHandler<HTMLSpanElement>; onAnimationIteration?: AnimationEventHandler<HTMLSpanElement>; onAnimationIterationCapture?: AnimationEventHandler<HTMLSpanElement>; onAnimationStart?: AnimationEventHandler<HTMLSpanElement>; onAnimationStartCapture?: AnimationEventHandler<HTMLSpanElement>; onAuxClick?: MouseEventHandler<HTMLSpanElement>; onAuxClickCapture?: MouseEventHandler<HTMLSpanElement>; onBeforeInput?: InputEventHandler<HTMLSpanElement>; onBeforeInputCapture?: InputEventHandler<HTMLSpanElement>; onBeforeToggle?: ToggleEventHandler<HTMLSpanElement>; onBlur?: FocusEventHandler<HTMLSpanElement>; onBlurCapture?: FocusEventHandler<HTMLSpanElement>; onCanPlay?: ReactEventHandler<HTMLSpanElement>; onCanPlayCapture?: ReactEventHandler<HTMLSpanElement>; onCanPlayThrough?: ReactEventHandler<HTMLSpanElement>; onCanPlayThroughCapture?: ReactEventHandler<HTMLSpanElement>; onChange?: ChangeEventHandler<HTMLSpanElement, Element>; onChangeCapture?: ChangeEventHandler<HTMLSpanElement, Element>; onClick?: MouseEventHandler<HTMLSpanElement>; onClickCapture?: MouseEventHandler<HTMLSpanElement>; onCompositionEnd?: CompositionEventHandler<HTMLSpanElement>; onCompositionEndCapture?: CompositionEventHandler<HTMLSpanElement>; onCompositionStart?: CompositionEventHandler<HTMLSpanElement>; onCompositionStartCapture?: CompositionEventHandler<HTMLSpanElement>; onCompositionUpdate?: CompositionEventHandler<HTMLSpanElement>; onCompositionUpdateCapture?: CompositionEventHandler<HTMLSpanElement>; onContextMenu?: MouseEventHandler<HTMLSpanElement>; onContextMenuCapture?: MouseEventHandler<HTMLSpanElement>; onCopy?: ClipboardEventHandler<HTMLSpanElement>; onCopyCapture?: ClipboardEventHandler<HTMLSpanElement>; onCut?: ClipboardEventHandler<HTMLSpanElement>; onCutCapture?: ClipboardEventHandler<HTMLSpanElement>; onDoubleClick?: MouseEventHandler<HTMLSpanElement>; onDoubleClickCapture?: MouseEventHandler<HTMLSpanElement>; onDrag?: DragEventHandler<HTMLSpanElement>; onDragCapture?: DragEventHandler<HTMLSpanElement>; onDragEnd?: DragEventHandler<HTMLSpanElement>; onDragEndCapture?: DragEventHandler<HTMLSpanElement>; onDragEnter?: DragEventHandler<HTMLSpanElement>; onDragEnterCapture?: DragEventHandler<HTMLSpanElement>; onDragExit?: DragEventHandler<HTMLSpanElement>; onDragExitCapture?: DragEventHandler<HTMLSpanElement>; onDragLeave?: DragEventHandler<HTMLSpanElement>; onDragLeaveCapture?: DragEventHandler<HTMLSpanElement>; onDragOver?: DragEventHandler<HTMLSpanElement>; onDragOverCapture?: DragEventHandler<HTMLSpanElement>; onDragStart?: DragEventHandler<HTMLSpanElement>; onDragStartCapture?: DragEventHandler<HTMLSpanElement>; onDrop?: DragEventHandler<HTMLSpanElement>; onDropCapture?: DragEventHandler<HTMLSpanElement>; onDurationChange?: ReactEventHandler<HTMLSpanElement>; onDurationChangeCapture?: ReactEventHandler<HTMLSpanElement>; onEmptied?: ReactEventHandler<HTMLSpanElement>; onEmptiedCapture?: ReactEventHandler<HTMLSpanElement>; onEncrypted?: ReactEventHandler<HTMLSpanElement>; onEncryptedCapture?: ReactEventHandler<HTMLSpanElement>; onEnded?: ReactEventHandler<HTMLSpanElement>; onEndedCapture?: ReactEventHandler<HTMLSpanElement>; onError?: ReactEventHandler<HTMLSpanElement>; onErrorCapture?: ReactEventHandler<HTMLSpanElement>; onFocus?: FocusEventHandler<HTMLSpanElement>; onFocusCapture?: FocusEventHandler<HTMLSpanElement>; onGotPointerCapture?: PointerEventHandler<HTMLSpanElement>; onGotPointerCaptureCapture?: PointerEventHandler<HTMLSpanElement>; onInput?: InputEventHandler<HTMLSpanElement>; onInputCapture?: InputEventHandler<HTMLSpanElement>; onInvalid?: ReactEventHandler<HTMLSpanElement>; onInvalidCapture?: ReactEventHandler<HTMLSpanElement>; onKeyDown?: KeyboardEventHandler<HTMLSpanElement>; onKeyDownCapture?: KeyboardEventHandler<HTMLSpanElement>; onKeyPress?: KeyboardEventHandler<HTMLSpanElement>; onKeyPressCapture?: KeyboardEventHandler<HTMLSpanElement>; onKeyUp?: KeyboardEventHandler<HTMLSpanElement>; onKeyUpCapture?: KeyboardEventHandler<HTMLSpanElement>; onLoad?: ReactEventHandler<HTMLSpanElement>; onLoadCapture?: ReactEventHandler<HTMLSpanElement>; onLoadedData?: ReactEventHandler<HTMLSpanElement>; onLoadedDataCapture?: ReactEventHandler<HTMLSpanElement>; onLoadedMetadata?: ReactEventHandler<HTMLSpanElement>; onLoadedMetadataCapture?: ReactEventHandler<HTMLSpanElement>; onLoadStart?: ReactEventHandler<HTMLSpanElement>; onLoadStartCapture?: ReactEventHandler<HTMLSpanElement>; onLostPointerCapture?: PointerEventHandler<HTMLSpanElement>; onLostPointerCaptureCapture?: PointerEventHandler<HTMLSpanElement>; onMouseDown?: MouseEventHandler<HTMLSpanElement>; onMouseDownCapture?: MouseEventHandler<HTMLSpanElement>; onMouseEnter?: MouseEventHandler<HTMLSpanElement>; onMouseLeave?: MouseEventHandler<HTMLSpanElement>; onMouseMove?: MouseEventHandler<HTMLSpanElement>; onMouseMoveCapture?: MouseEventHandler<HTMLSpanElement>; onMouseOut?: MouseEventHandler<HTMLSpanElement>; onMouseOutCapture?: MouseEventHandler<HTMLSpanElement>; onMouseOver?: MouseEventHandler<HTMLSpanElement>; onMouseOverCapture?: MouseEventHandler<HTMLSpanElement>; onMouseUp?: MouseEventHandler<HTMLSpanElement>; onMouseUpCapture?: MouseEventHandler<HTMLSpanElement>; onPaste?: ClipboardEventHandler<HTMLSpanElement>; onPasteCapture?: ClipboardEventHandler<HTMLSpanElement>; onPause?: ReactEventHandler<HTMLSpanElement>; onPauseCapture?: ReactEventHandler<HTMLSpanElement>; onPlay?: ReactEventHandler<HTMLSpanElement>; onPlayCapture?: ReactEventHandler<HTMLSpanElement>; onPlaying?: ReactEventHandler<HTMLSpanElement>; onPlayingCapture?: ReactEventHandler<HTMLSpanElement>; onPointerCancel?: PointerEventHandler<HTMLSpanElement>; onPointerCancelCapture?: PointerEventHandler<HTMLSpanElement>; onPointerDown?: PointerEventHandler<HTMLSpanElement>; onPointerDownCapture?: PointerEventHandler<HTMLSpanElement>; onPointerEnter?: PointerEventHandler<HTMLSpanElement>; onPointerLeave?: PointerEventHandler<HTMLSpanElement>; onPointerMove?: PointerEventHandler<HTMLSpanElement>; onPointerMoveCapture?: PointerEventHandler<HTMLSpanElement>; onPointerOut?: PointerEventHandler<HTMLSpanElement>; onPointerOutCapture?: PointerEventHandler<HTMLSpanElement>; onPointerOver?: PointerEventHandler<HTMLSpanElement>; onPointerOverCapture?: PointerEventHandler<HTMLSpanElement>; onPointerUp?: PointerEventHandler<HTMLSpanElement>; onPointerUpCapture?: PointerEventHandler<HTMLSpanElement>; onProgress?: ReactEventHandler<HTMLSpanElement>; onProgressCapture?: ReactEventHandler<HTMLSpanElement>; onRateChange?: ReactEventHandler<HTMLSpanElement>; onRateChangeCapture?: ReactEventHandler<HTMLSpanElement>; onRemove?: (event) => void; onReset?: ReactEventHandler<HTMLSpanElement>; onResetCapture?: ReactEventHandler<HTMLSpanElement>; onScroll?: UIEventHandler<HTMLSpanElement>; onScrollCapture?: UIEventHandler<HTMLSpanElement>; onScrollEnd?: UIEventHandler<HTMLSpanElement>; onScrollEndCapture?: UIEventHandler<HTMLSpanElement>; onSeeked?: ReactEventHandler<HTMLSpanElement>; onSeekedCapture?: ReactEventHandler<HTMLSpanElement>; onSeeking?: ReactEventHandler<HTMLSpanElement>; onSeekingCapture?: ReactEventHandler<HTMLSpanElement>; onSelect?: ReactEventHandler<HTMLSpanElement>; onSelectCapture?: ReactEventHandler<HTMLSpanElement>; onStalled?: ReactEventHandler<HTMLSpanElement>; onStalledCapture?: ReactEventHandler<HTMLSpanElement>; onSubmit?: SubmitEventHandler<HTMLSpanElement>; onSubmitCapture?: SubmitEventHandler<HTMLSpanElement>; onSuspend?: ReactEventHandler<HTMLSpanElement>; onSuspendCapture?: ReactEventHandler<HTMLSpanElement>; onTimeUpdate?: ReactEventHandler<HTMLSpanElement>; onTimeUpdateCapture?: ReactEventHandler<HTMLSpanElement>; onToggle?: ToggleEventHandler<HTMLSpanElement>; onTouchCancel?: TouchEventHandler<HTMLSpanElement>; onTouchCancelCapture?: TouchEventHandler<HTMLSpanElement>; onTouchEnd?: TouchEventHandler<HTMLSpanElement>; onTouchEndCapture?: TouchEventHandler<HTMLSpanElement>; onTouchMove?: TouchEventHandler<HTMLSpanElement>; onTouchMoveCapture?: TouchEventHandler<HTMLSpanElement>; onTouchStart?: TouchEventHandler<HTMLSpanElement>; onTouchStartCapture?: TouchEventHandler<HTMLSpanElement>; onTransitionCancel?: TransitionEventHandler<HTMLSpanElement>; onTransitionCancelCapture?: TransitionEventHandler<HTMLSpanElement>; onTransitionEnd?: TransitionEventHandler<HTMLSpanElement>; onTransitionEndCapture?: TransitionEventHandler<HTMLSpanElement>; onTransitionRun?: TransitionEventHandler<HTMLSpanElement>; onTransitionRunCapture?: TransitionEventHandler<HTMLSpanElement>; onTransitionStart?: TransitionEventHandler<HTMLSpanElement>; onTransitionStartCapture?: TransitionEventHandler<HTMLSpanElement>; onVolumeChange?: ReactEventHandler<HTMLSpanElement>; onVolumeChangeCapture?: ReactEventHandler<HTMLSpanElement>; onWaiting?: ReactEventHandler<HTMLSpanElement>; onWaitingCapture?: ReactEventHandler<HTMLSpanElement>; onWheel?: WheelEventHandler<HTMLSpanElement>; onWheelCapture?: WheelEventHandler<HTMLSpanElement>; part?: string; popover?: "" | "auto" | "manual" | "hint"; popoverTarget?: string; popoverTargetAction?: "toggle" | "hide" | "show"; prefix?: string; property?: string; radioGroup?: string; ref?: Ref<HTMLSpanElement>; rel?: string; removable?: boolean; resource?: string; results?: number; rev?: string; role?: AriaRole; security?: string; size?: BadgeSize; slot?: string; spellCheck?: Booleanish; style?: CSSProperties; suppressContentEditableWarning?: boolean; suppressHydrationWarning?: boolean; tabIndex?: number; testId?: string; title?: string; translate?: "yes" | "no"; typeof?: string; unselectable?: "off" | "on"; uppercase?: boolean; variant?: BadgeVariant; vocab?: string; }>

Defined in: src/components/primitives/Badge/Badge.tsx:69

A small inline status indicator / tag.

Badges are visual labels for status, counts, or tags. Pair with an editor item to indicate its state (e.g. “DRAFT”, “ERROR”, “3 NEW”).

Example

<Badge color="success">Saved</Badge>
<Badge variant="outline" color="warning" icon={<WarningIcon />}>
  Warning
</Badge>
<Badge removable onRemove={handleRemove}>feature/foo</Badge>