ButtonRenders a button or a component that looks like a button.PreviewCode Installation Usage my-component.tsximport { Button } from "@caprice-ui/react" Examples API Reference PropTypeform?stringslot?stringstyle?objecttitle?stringref?object | function | nullkey?bigint | number | string | nulldisabled?booleanformAction?function | stringformEncType?stringformMethod?stringformNoValidate?booleanformTarget?stringname?stringtype?"reset" | "submit" | "button"value?array | number | stringdefaultChecked?booleandefaultValue?array | number | stringsuppressContentEditableWarning?booleansuppressHydrationWarning?booleanaccessKey?stringautoCapitalize?"characters" | "words" | "sentences" | "on" | "none" | "off" | object & stringautoFocus?booleanclassName?stringcontentEditable?"plaintext-only" | "inherit" | "false" | "true" | booleancontextMenu?stringdir?stringdraggable?"false" | "true" | booleanenterKeyHint?"send" | "previous" | "next" | "go" | "done" | "enter" | "search"hidden?booleanid?stringlang?stringnonce?stringspellCheck?"false" | "true" | booleantabIndex?numbertranslate?"no" | "yes"radioGroup?stringrole?"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" | "none" | object & string | "switch" | "table" | "search" | "option" | "menuitem" | "menu" | "main" | "link" | "img" | "form" | "figure" | "dialog" | "article" | "button"about?stringcontent?stringdatatype?stringinlist?anyprefix?stringproperty?stringrel?stringresource?stringrev?stringtypeof?stringvocab?stringautoCorrect?stringautoSave?stringcolor?stringitemProp?stringitemScope?booleanitemType?stringitemID?stringitemRef?stringresults?numbersecurity?stringunselectable?"on" | "off"popover?"hint" | "manual" | "auto" | ""popoverTargetAction?"hide" | "show" | "toggle"popoverTarget?stringinert?booleaninputMode?"decimal" | "numeric" | "email" | "url" | "tel" | "none" | "text" | "search"is?stringexportparts?stringpart?stringaria-activedescendant?stringaria-atomic?"false" | "true" | booleanaria-autocomplete?"both" | "inline" | "list" | "none"aria-braillelabel?stringaria-brailleroledescription?stringaria-busy?"false" | "true" | booleanaria-checked?"mixed" | "false" | "true" | booleanaria-colcount?numberaria-colindex?numberaria-colindextext?stringaria-colspan?numberaria-controls?stringaria-current?"date" | "location" | "step" | "page" | "false" | "true" | "time" | booleanaria-describedby?stringaria-description?stringaria-details?stringaria-disabled?"false" | "true" | booleanaria-dropeffect?"popup" | "move" | "execute" | "copy" | "none" | "link"aria-errormessage?stringaria-expanded?"false" | "true" | booleanaria-flowto?stringaria-grabbed?"false" | "true" | booleanaria-haspopup?"tree" | "listbox" | "grid" | "false" | "true" | "menu" | "dialog" | booleanaria-hidden?"false" | "true" | booleanaria-invalid?"spelling" | "grammar" | "false" | "true" | booleanaria-keyshortcuts?stringaria-label?stringaria-labelledby?stringaria-level?numberaria-live?"polite" | "assertive" | "off"aria-modal?"false" | "true" | booleanaria-multiline?"false" | "true" | booleanaria-multiselectable?"false" | "true" | booleanaria-orientation?"vertical" | "horizontal"aria-owns?stringaria-placeholder?stringaria-posinset?numberaria-pressed?"mixed" | "false" | "true" | booleanaria-readonly?"false" | "true" | booleanaria-relevant?"text removals" | "text additions" | "removals text" | "removals additions" | "removals" | "all" | "additions text" | "additions removals" | "additions" | "text"aria-required?"false" | "true" | booleanaria-roledescription?stringaria-rowcount?numberaria-rowindex?numberaria-rowindextext?stringaria-rowspan?numberaria-selected?"false" | "true" | booleanaria-setsize?numberaria-sort?"other" | "descending" | "ascending" | "none"aria-valuemax?numberaria-valuemin?numberaria-valuenow?numberaria-valuetext?stringchildren?ReactNodedangerouslySetInnerHTML?objectonCopy?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>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> | objectonPress?functiononPressStart?functiononPressEnd?functiononPressChange?functiononPressUp?functiononClick?functionvariant?"ghost" | "secondary" | "outline" | "destructive" | "default" | "link"size?"icon" | "lg" | "sm" | "default"Last updated on BadgeDisplay 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.CheckboxRenders a checkbox that allows single or multiple selections from a list of options.