Badge Display bite-sized snippets of info, like notifications or labels, that you want to stand out from regular text. They're perfect for showing things like unread message counts, status updates or categories without taking up much space.
import { Badge } from "@caprice-ui/react" ref?object | function | null
key?bigint | number | string | null
defaultValue?array | number | string
suppressContentEditableWarning?boolean
suppressHydrationWarning?boolean
autoCapitalize?object & string | "characters" | "words" | "sentences" | "on" | "none" | "off"
contentEditable?"plaintext-only" | "inherit" | "false" | "true" | boolean
draggable?"false" | "true" | boolean
enterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"
spellCheck?"false" | "true" | boolean
role?"treeitem" | "treegrid" | "tree" | "tooltip" | "toolbar" | "timer" | "textbox" | "term" | "tabpanel" | "tablist" | "tab" | "status" | "spinbutton" | "slider" | "separator" | "searchbox" | "scrollbar" | "rowheader" | "rowgroup" | "row" | "region" | "radiogroup" | "radio" | "progressbar" | "presentation" | "note" | "navigation" | "menuitemradio" | "menuitemcheckbox" | "menubar" | "math" | "marquee" | "log" | "listitem" | "listbox" | "list" | "heading" | "group" | "gridcell" | "grid" | "feed" | "document" | "directory" | "definition" | "contentinfo" | "complementary" | "combobox" | "columnheader" | "checkbox" | "cell" | "banner" | "application" | "alertdialog" | "alert" | object & string | "none" | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "button" | "article"
unselectable?"on" | "off"
popover?"hint" | "manual" | "auto" | ""
popoverTargetAction?"hide" | "show" | "toggle"
inputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"
aria-activedescendant?string
aria-atomic?"false" | "true" | boolean
aria-autocomplete?"both" | "inline" | "list" | "none"
aria-brailleroledescription?string
aria-busy?"false" | "true" | boolean
aria-checked?"mixed" | "false" | "true" | boolean
aria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | boolean
aria-disabled?"false" | "true" | boolean
aria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"
aria-expanded?"false" | "true" | boolean
aria-grabbed?"false" | "true" | boolean
aria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | boolean
aria-hidden?"false" | "true" | boolean
aria-invalid?"spelling" | "grammar" | "false" | "true" | boolean
aria-live?"polite" | "assertive" | "off"
aria-modal?"false" | "true" | boolean
aria-multiline?"false" | "true" | boolean
aria-multiselectable?"false" | "true" | boolean
aria-orientation?"vertical" | "horizontal"
aria-pressed?"mixed" | "false" | "true" | boolean
aria-readonly?"false" | "true" | boolean
aria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"
aria-required?"false" | "true" | boolean
aria-roledescription?string
aria-selected?"false" | "true" | boolean
aria-sort?"other" | "descending" | "ascending" | "none"
dangerouslySetInnerHTML?object
onCopy?ClipboardEventHandler < object >
onCopyCapture?ClipboardEventHandler < object >
onCut?ClipboardEventHandler < object >
onCutCapture?ClipboardEventHandler < object >
onPaste?ClipboardEventHandler < object >
onPasteCapture?ClipboardEventHandler < object >
onCompositionEnd?CompositionEventHandler < object >
onCompositionEndCapture?CompositionEventHandler < object >
onCompositionStart?CompositionEventHandler < object >
onCompositionStartCapture?CompositionEventHandler < object >
onCompositionUpdate?CompositionEventHandler < object >
onCompositionUpdateCapture?CompositionEventHandler < object >
onFocus?FocusEventHandler < object >
onFocusCapture?FocusEventHandler < object >
onBlur?FocusEventHandler < object >
onBlurCapture?FocusEventHandler < object >
onChange?FormEventHandler < object >
onChangeCapture?FormEventHandler < object >
onBeforeInput?InputEventHandler < object >
onBeforeInputCapture?FormEventHandler < object >
onInput?FormEventHandler < object >
onInputCapture?FormEventHandler < object >
onReset?FormEventHandler < object >
onResetCapture?FormEventHandler < object >
onSubmit?FormEventHandler < object >
onSubmitCapture?FormEventHandler < object >
onInvalid?FormEventHandler < object >
onInvalidCapture?FormEventHandler < object >
onLoad?ReactEventHandler < object >
onLoadCapture?ReactEventHandler < object >
onError?ReactEventHandler < object >
onErrorCapture?ReactEventHandler < object >
onKeyDown?KeyboardEventHandler < object >
onKeyDownCapture?KeyboardEventHandler < object >
onKeyPress?KeyboardEventHandler < object >
onKeyPressCapture?KeyboardEventHandler < object >
onKeyUp?KeyboardEventHandler < object >
onKeyUpCapture?KeyboardEventHandler < object >
onAbort?ReactEventHandler < object >
onAbortCapture?ReactEventHandler < object >
onCanPlay?ReactEventHandler < object >
onCanPlayCapture?ReactEventHandler < object >
onCanPlayThrough?ReactEventHandler < object >
onCanPlayThroughCapture?ReactEventHandler < object >
onDurationChange?ReactEventHandler < object >
onDurationChangeCapture?ReactEventHandler < object >
onEmptied?ReactEventHandler < object >
onEmptiedCapture?ReactEventHandler < object >
onEncrypted?ReactEventHandler < object >
onEncryptedCapture?ReactEventHandler < object >
onEnded?ReactEventHandler < object >
onEndedCapture?ReactEventHandler < object >
onLoadedData?ReactEventHandler < object >
onLoadedDataCapture?ReactEventHandler < object >
onLoadedMetadata?ReactEventHandler < object >
onLoadedMetadataCapture?ReactEventHandler < object >
onLoadStart?ReactEventHandler < object >
onLoadStartCapture?ReactEventHandler < object >
onPause?ReactEventHandler < object >
onPauseCapture?ReactEventHandler < object >
onPlay?ReactEventHandler < object >
onPlayCapture?ReactEventHandler < object >
onPlaying?ReactEventHandler < object >
onPlayingCapture?ReactEventHandler < object >
onProgress?ReactEventHandler < object >
onProgressCapture?ReactEventHandler < object >
onRateChange?ReactEventHandler < object >
onRateChangeCapture?ReactEventHandler < object >
onSeeked?ReactEventHandler < object >
onSeekedCapture?ReactEventHandler < object >
onSeeking?ReactEventHandler < object >
onSeekingCapture?ReactEventHandler < object >
onStalled?ReactEventHandler < object >
onStalledCapture?ReactEventHandler < object >
onSuspend?ReactEventHandler < object >
onSuspendCapture?ReactEventHandler < object >
onTimeUpdate?ReactEventHandler < object >
onTimeUpdateCapture?ReactEventHandler < object >
onVolumeChange?ReactEventHandler < object >
onVolumeChangeCapture?ReactEventHandler < object >
onWaiting?ReactEventHandler < object >
onWaitingCapture?ReactEventHandler < object >
onAuxClick?MouseEventHandler < object >
onAuxClickCapture?MouseEventHandler < object >
onClick?MouseEventHandler < object >
onClickCapture?MouseEventHandler < object >
onContextMenu?MouseEventHandler < object >
onContextMenuCapture?MouseEventHandler < object >
onDoubleClick?MouseEventHandler < object >
onDoubleClickCapture?MouseEventHandler < object >
onDrag?DragEventHandler < object >
onDragCapture?DragEventHandler < object >
onDragEnd?DragEventHandler < object >
onDragEndCapture?DragEventHandler < object >
onDragEnter?DragEventHandler < object >
onDragEnterCapture?DragEventHandler < object >
onDragExit?DragEventHandler < object >
onDragExitCapture?DragEventHandler < object >
onDragLeave?DragEventHandler < object >
onDragLeaveCapture?DragEventHandler < object >
onDragOver?DragEventHandler < object >
onDragOverCapture?DragEventHandler < object >
onDragStart?DragEventHandler < object >
onDragStartCapture?DragEventHandler < object >
onDrop?DragEventHandler < object >
onDropCapture?DragEventHandler < object >
onMouseDown?MouseEventHandler < object >
onMouseDownCapture?MouseEventHandler < object >
onMouseEnter?MouseEventHandler < object >
onMouseLeave?MouseEventHandler < object >
onMouseMove?MouseEventHandler < object >
onMouseMoveCapture?MouseEventHandler < object >
onMouseOut?MouseEventHandler < object >
onMouseOutCapture?MouseEventHandler < object >
onMouseOver?MouseEventHandler < object >
onMouseOverCapture?MouseEventHandler < object >
onMouseUp?MouseEventHandler < object >
onMouseUpCapture?MouseEventHandler < object >
onSelect?ReactEventHandler < object >
onSelectCapture?ReactEventHandler < object >
onTouchCancel?TouchEventHandler < object >
onTouchCancelCapture?TouchEventHandler < object >
onTouchEnd?TouchEventHandler < object >
onTouchEndCapture?TouchEventHandler < object >
onTouchMove?TouchEventHandler < object >
onTouchMoveCapture?TouchEventHandler < object >
onTouchStart?TouchEventHandler < object >
onTouchStartCapture?TouchEventHandler < object >
onPointerDown?PointerEventHandler < object >
onPointerDownCapture?PointerEventHandler < object >
onPointerMove?PointerEventHandler < object >
onPointerMoveCapture?PointerEventHandler < object >
onPointerUp?PointerEventHandler < object >
onPointerUpCapture?PointerEventHandler < object >
onPointerCancel?PointerEventHandler < object >
onPointerCancelCapture?PointerEventHandler < object >
onPointerEnter?PointerEventHandler < object >
onPointerLeave?PointerEventHandler < object >
onPointerOver?PointerEventHandler < object >
onPointerOverCapture?PointerEventHandler < object >
onPointerOut?PointerEventHandler < object >
onPointerOutCapture?PointerEventHandler < object >
onGotPointerCapture?PointerEventHandler < object >
onGotPointerCaptureCapture?PointerEventHandler < object >
onLostPointerCapture?PointerEventHandler < object >
onLostPointerCaptureCapture?PointerEventHandler < object >
onScroll?UIEventHandler < object >
onScrollCapture?UIEventHandler < object >
onScrollEnd?UIEventHandler < object >
onScrollEndCapture?UIEventHandler < object >
onWheel?WheelEventHandler < object >
onWheelCapture?WheelEventHandler < object >
onAnimationStart?AnimationEventHandler < object >
onAnimationStartCapture?AnimationEventHandler < object >
onAnimationEnd?AnimationEventHandler < object >
onAnimationEndCapture?AnimationEventHandler < object >
onAnimationIteration?AnimationEventHandler < object >
onAnimationIterationCapture?AnimationEventHandler < object >
onToggle?ToggleEventHandler < object >
onBeforeToggle?ToggleEventHandler < object >
onTransitionCancel?TransitionEventHandler < object >
onTransitionCancelCapture?TransitionEventHandler < object >
onTransitionEnd?TransitionEventHandler < object >
onTransitionEndCapture?TransitionEventHandler < object >
onTransitionRun?TransitionEventHandler < object >
onTransitionRunCapture?TransitionEventHandler < object >
onTransitionStart?TransitionEventHandler < object >
onTransitionStartCapture?TransitionEventHandler < object >
render?ComponentRenderFn < HTMLProps, object > | object
variant?"secondary" | "outline" | "destructive" | "default"