Color swatch
The Color swatch allows users to select a single predefined color.
Used for this
- To let users change, update, or add predefined colors
Not for this
- For more finite control over color selection, use the Color picker
How to use it
Default
The Color swatch allows users to select a single predefined color.
Custom trigger
The Color swatch can be displayed using a trigger, e.g. an Icon button.
Dialog
The Color swatch can be shown inside a dialog using <ColorSwatchDialog>.
API
ColorSwatch
Extends HTMLAttributes<HTMLTableElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
colIndex | number | – | Sets the focused column index in a controlled color swatch. Can be set to -1 to clear the row focus. |
colors | { value: string; label: string; }[][] | Required | Sets the two-dimension array of labeled HEX and RGB/A string colors |
defaultColIndex | number | – | Sets the default focused column index in an uncontrolled color swatch |
defaultRowIndex | number | – | Sets the default focused row index in an uncontrolled color swatch. Can be set to -1 to clear the column selection. |
defaultSelectedColIndex | number | – | Sets the default selected column index in an uncontrolled color swatch |
defaultSelectedRowIndex | number | – | Sets the default selected row index in an uncontrolled color swatch |
onChange | – | Handles color swatch changes | |
onSelect | – | Handles color swatch select event | |
rowIndex | number | – | Sets the focused row index in a controlled color swatch |
selectedColIndex | number | – | Sets the selected column index in a controlled color swatch. Can be set to -1 to clear the row selection. |
selectedRowIndex | number | – | Sets the selected row index in a controlled color swatch. Can be set to -1 to clear the column focus. |
ColorSwatchDialog
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
buttonProps | HTMLAttributes<HTMLButtonElement> | – | Passes HTML attributes to the color dialog button element |
colIndex | number | – | Sets the focused column index in a controlled color swatch. Can be set to -1 to clear the row focus. |
colors | { value: string; label: string; }[][] | Required | Sets the two-dimension array of labeled HEX and RGB/A string colors |
defaultColIndex | number | – | Sets the default focused column index in an uncontrolled color swatch |
defaultRowIndex | number | – | Sets the default focused row index in an uncontrolled color swatch. Can be set to -1 to clear the column selection. |
defaultSelectedColIndex | number | – | Sets the default selected column index in an uncontrolled color swatch |
defaultSelectedRowIndex | number | – | Sets the default selected row index in an uncontrolled color swatch |
disabled | boolean | – | Disables the color dialog button |
focusInset | boolean | – | Applies inset box-shadow styling on focus |
hasArrow | boolean | – | Adds an arrow to the color dialog |
isAnimated | boolean | true | Animates the color dialog |
isOpen | boolean | – | Opens the dialog in a controlled color swatch dialog |
onChange | – | Handles color swatch changes | |
onDialogChange | – | Handles dialog changes Parameters changes The changed dialog state | |
onSelect | – | Handles color swatch select event | |
placement | 'start' | 'end' | 'auto' | 'top' | 'bottom' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'end-top' | 'end-bottom' | 'start-top' | 'start-bottom' | 'bottom-start' | Adjusts the placement of the color dialog |
popperModifiers | Modifier<any, any>[] | – | Modifies Popper instance to customize positioning logic |
rowIndex | number | – | Sets the focused row index in a controlled color swatch |
selectedColIndex | number | – | Sets the selected column index in a controlled color swatch. Can be set to -1 to clear the row selection. |
selectedRowIndex | number | – | Sets the selected row index in a controlled color swatch. Can be set to -1 to clear the column focus. |
zIndex | number | 1000 | Sets the z-index of the color dialog |