API Reference > ui-components > Color > ColorPickerProps ColorPickerProps Interface Beta Properties for the ColorPickerButton React component Extends ButtonHTMLAttributes<HTMLButtonElement> CommonProps Properties Name Type Description activeColor ColorDef active color colorDefs undefined | ColorDef[] available colors disabled undefined | false | true Disabled or not dropDownTitle undefined | string Title to show at top of DropDown numColumns number Number of columns onColorPick (color: ColorDef) => void | undefined function to run when user selects color swatch readonly undefined | false | true Readonly or not round undefined | false | true Show swatches as squares unless round is set to true Inherited properties Name Type Inherited from Description about undefined | string HTMLAttributes accessKey undefined | string HTMLAttributes aria-activedescendant undefined | string AriaAttributes Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. aria-atomic boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. aria-autocomplete "none" = undefined | "inline" = undefined | "list" = undefined | "both" = undefined AriaAttributes Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be aria-busy boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user. aria-checked boolean | "false" = undefined | "mixed" = undefined | "true" = undefined AriaAttributes Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. aria-colcount undefined | number AriaAttributes Defines the total number of columns in a table, grid, or treegrid. aria-colindex undefined | number AriaAttributes Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. aria-colspan undefined | number AriaAttributes Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. aria-controls undefined | string AriaAttributes Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-current boolean | "false" = undefined | "true" = undefined | "page" = undefined | "step" = undefined | "location" = undefined | "date" = undefined | "time" = undefined AriaAttributes Indicates the element that represents the current item within a container or set of related elements. aria-describedby undefined | string AriaAttributes Identifies the element (or elements) that describes the object. aria-details undefined | string AriaAttributes Identifies the element that provides a detailed, extended description for the object. aria-disabled boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. aria-dropeffect "none" = undefined | "copy" = undefined | "execute" = undefined | "link" = undefined | "move" = undefined | "popup" = undefined AriaAttributes Indicates what functions can be performed when a dragged object is released on the drop target. aria-errormessage undefined | string AriaAttributes Identifies the element that provides an error message for the object. aria-expanded boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. aria-flowto undefined | string AriaAttributes Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, aria-grabbed boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates an element's "grabbed" state in a drag-and-drop operation. aria-haspopup boolean | "false" = undefined | "true" = undefined | "menu" = undefined | "listbox" = undefined | "tree" = undefined | "grid" = undefined | "dialog" = undefined AriaAttributes Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. aria-hidden boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether the element is exposed to an accessibility API. aria-invalid boolean | "false" = undefined | "true" = undefined | "grammar" = undefined | "spelling" = undefined AriaAttributes Indicates the entered value does not conform to the format expected by the application. aria-keyshortcuts undefined | string AriaAttributes Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. aria-label undefined | string AriaAttributes Defines a string value that labels the current element. aria-labelledby undefined | string AriaAttributes Identifies the element (or elements) that labels the current element. aria-level undefined | number AriaAttributes Defines the hierarchical level of an element within a structure. aria-live "off" = undefined | "assertive" = undefined | "polite" = undefined AriaAttributes Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. aria-modal boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether an element is modal when displayed. aria-multiline boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates whether a text box accepts multiple lines of input or only a single line. aria-multiselectable boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the user may select more than one item from the current selectable descendants. aria-orientation "horizontal" = undefined | "vertical" = undefined AriaAttributes Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. aria-owns undefined | string AriaAttributes Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship aria-placeholder undefined | string AriaAttributes Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. aria-posinset undefined | number AriaAttributes Defines an element's number or position in the current set of listitems or treeitems. aria-pressed boolean | "false" = undefined | "mixed" = undefined | "true" = undefined AriaAttributes Indicates the current "pressed" state of toggle buttons. aria-readonly boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that the element is not editable, but is otherwise operable. aria-relevant "additions" = undefined | "additions text" = undefined | "all" = undefined | "removals" = undefined | "text" = undefined AriaAttributes Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. aria-required boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates that user input is required on the element before a form may be submitted. aria-roledescription undefined | string AriaAttributes Defines a human-readable, author-localized description for the role of an element. aria-rowcount undefined | number AriaAttributes Defines the total number of rows in a table, grid, or treegrid. aria-rowindex undefined | number AriaAttributes Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. aria-rowspan undefined | number AriaAttributes Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. aria-selected boolean | "false" = undefined | "true" = undefined AriaAttributes Indicates the current "selected" state of various widgets. aria-setsize undefined | number AriaAttributes Defines the number of items in the current set of listitems or treeitems. aria-sort "none" = undefined | "ascending" = undefined | "descending" = undefined | "other" = undefined AriaAttributes Indicates if items in a table or grid are sorted in ascending or descending order. aria-valuemax undefined | number AriaAttributes Defines the maximum allowed value for a range widget. aria-valuemin undefined | number AriaAttributes Defines the minimum allowed value for a range widget. aria-valuenow undefined | number AriaAttributes Defines the current value for a range widget. aria-valuetext undefined | string AriaAttributes Defines the human readable text alternative of aria-valuenow for a range widget. autoCapitalize undefined | string HTMLAttributes autoCorrect undefined | string HTMLAttributes autoFocus undefined | false | true ButtonHTMLAttributes<HTMLButtonElement> autoSave undefined | string HTMLAttributes children undefined | ReactNode DOMAttributes className undefined | string HTMLAttributes color undefined | string HTMLAttributes contentEditable Booleanish | "inherit" = undefined HTMLAttributes contextMenu undefined | string HTMLAttributes dangerouslySetInnerHTML undefined | { __html: string } DOMAttributes datatype undefined | string HTMLAttributes defaultChecked undefined | false | true HTMLAttributes defaultValue string | number | string[] HTMLAttributes dir undefined | string HTMLAttributes draggable undefined | Booleanish HTMLAttributes form undefined | string ButtonHTMLAttributes<HTMLButtonElement> formAction undefined | string ButtonHTMLAttributes<HTMLButtonElement> formEncType undefined | string ButtonHTMLAttributes<HTMLButtonElement> formMethod undefined | string ButtonHTMLAttributes<HTMLButtonElement> formNoValidate undefined | false | true ButtonHTMLAttributes<HTMLButtonElement> formTarget undefined | string ButtonHTMLAttributes<HTMLButtonElement> hidden undefined | false | true HTMLAttributes id undefined | string HTMLAttributes inlist undefined | any HTMLAttributes inputMode "none" = undefined | "text" = undefined | "tel" = undefined | "url" = undefined | "email" = undefined | "numeric" = undefined | "decimal" = undefined | "search" = undefined HTMLAttributes Hints at the type of data that might be entered by the user while editing the element or its contents is undefined | string HTMLAttributes Specify that a standard HTML element should behave like a defined custom built-in element itemID undefined | string HTMLAttributes itemProp undefined | string HTMLAttributes itemRef undefined | string HTMLAttributes itemScope undefined | false | true HTMLAttributes itemType undefined | string HTMLAttributes lang undefined | string HTMLAttributes name undefined | string ButtonHTMLAttributes<HTMLButtonElement> onAbort undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onAbortCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onAnimationEnd undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAnimationEndCapture undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAnimationIteration undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAnimationIterationCapture undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAnimationStart undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAnimationStartCapture undefined | AnimationEventHandler<HTMLButtonElement> DOMAttributes onAuxClick undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onAuxClickCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onBeforeInput undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onBeforeInputCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onBlur undefined | FocusEventHandler<HTMLButtonElement> DOMAttributes onBlurCapture undefined | FocusEventHandler<HTMLButtonElement> DOMAttributes onCanPlay undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onCanPlayCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onCanPlayThrough undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onCanPlayThroughCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onChange undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onChangeCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onClick undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onClickCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onCompositionEnd undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onCompositionEndCapture undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onCompositionStart undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onCompositionStartCapture undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onCompositionUpdate undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onCompositionUpdateCapture undefined | CompositionEventHandler<HTMLButtonElement> DOMAttributes onContextMenu undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onContextMenuCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onCopy undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onCopyCapture undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onCut undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onCutCapture undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onDoubleClick undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onDoubleClickCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onDrag undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragEnd undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragEndCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragEnter undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragEnterCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragExit undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragExitCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragLeave undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragLeaveCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragOver undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragOverCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragStart undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDragStartCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDrop undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDropCapture undefined | DragEventHandler<HTMLButtonElement> DOMAttributes onDurationChange undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onDurationChangeCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEmptied undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEmptiedCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEncrypted undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEncryptedCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEnded undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onEndedCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onError undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onErrorCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onFocus undefined | FocusEventHandler<HTMLButtonElement> DOMAttributes onFocusCapture undefined | FocusEventHandler<HTMLButtonElement> DOMAttributes onGotPointerCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onGotPointerCaptureCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onInput undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onInputCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onInvalid undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onInvalidCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onKeyDown undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onKeyDownCapture undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onKeyPress undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onKeyPressCapture undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onKeyUp undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onKeyUpCapture undefined | KeyboardEventHandler<HTMLButtonElement> DOMAttributes onLoad undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadStart undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadStartCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadedData undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadedDataCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadedMetadata undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLoadedMetadataCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onLostPointerCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onLostPointerCaptureCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onMouseDown undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseDownCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseEnter undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseLeave undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseMove undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseMoveCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseOut undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseOutCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseOver undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseOverCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseUp undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onMouseUpCapture undefined | MouseEventHandler<HTMLButtonElement> DOMAttributes onPaste undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onPasteCapture undefined | ClipboardEventHandler<HTMLButtonElement> DOMAttributes onPause undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPauseCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPlay undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPlayCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPlaying undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPlayingCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onPointerCancel undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerCancelCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerDown undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerDownCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerEnter undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerEnterCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerLeave undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerLeaveCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerMove undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerMoveCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerOut undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerOutCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerOver undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerOverCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerUp undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onPointerUpCapture undefined | PointerEventHandler<HTMLButtonElement> DOMAttributes onProgress undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onProgressCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onRateChange undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onRateChangeCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onReset undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onResetCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onScroll undefined | UIEventHandler<HTMLButtonElement> DOMAttributes onScrollCapture undefined | UIEventHandler<HTMLButtonElement> DOMAttributes onSeeked undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSeekedCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSeeking undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSeekingCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSelect undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSelectCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onStalled undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onStalledCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSubmit undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onSubmitCapture undefined | FormEventHandler<HTMLButtonElement> DOMAttributes onSuspend undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onSuspendCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onTimeUpdate undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onTimeUpdateCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onTouchCancel undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchCancelCapture undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchEnd undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchEndCapture undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchMove undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchMoveCapture undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchStart undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTouchStartCapture undefined | TouchEventHandler<HTMLButtonElement> DOMAttributes onTransitionEnd undefined | TransitionEventHandler<HTMLButtonElement> DOMAttributes onTransitionEndCapture undefined | TransitionEventHandler<HTMLButtonElement> DOMAttributes onVolumeChange undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onVolumeChangeCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onWaiting undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onWaitingCapture undefined | ReactEventHandler<HTMLButtonElement> DOMAttributes onWheel undefined | WheelEventHandler<HTMLButtonElement> DOMAttributes onWheelCapture undefined | WheelEventHandler<HTMLButtonElement> DOMAttributes placeholder undefined | string HTMLAttributes prefix undefined | string HTMLAttributes property undefined | string HTMLAttributes radioGroup undefined | string HTMLAttributes resource undefined | string HTMLAttributes results undefined | number HTMLAttributes role undefined | string HTMLAttributes security undefined | string HTMLAttributes slot undefined | string HTMLAttributes spellCheck undefined | Booleanish HTMLAttributes style undefined | CSSProperties HTMLAttributes suppressContentEditableWarning undefined | false | true HTMLAttributes suppressHydrationWarning undefined | false | true HTMLAttributes tabIndex undefined | number HTMLAttributes title undefined | string HTMLAttributes translate "yes" = undefined | "no" = undefined HTMLAttributes type "submit" = undefined | "reset" = undefined | "button" = undefined ButtonHTMLAttributes<HTMLButtonElement> typeof undefined | string HTMLAttributes unselectable "on" = undefined | "off" = undefined HTMLAttributes value string | string[] | number ButtonHTMLAttributes<HTMLButtonElement> vocab undefined | string HTMLAttributes Defined in ui/components/src/ui-components/color/ColorPickerButton.tsx Line 21 Last Updated: 13 June, 2024