PolarisColor picker
The color picker is used to let merchants select a color visually. For example, merchants use the color picker to customize the accent color of the email templates for their shop.
Use when merchants need to select a color to make the selection a visual task rather than a technical one.
import{ColorPicker}from'@shopify/polaris';import{useState}from'react';functionColorPickerExample(){const[color,setColor]=useState({hue:120,brightness:1,saturation:1,});return<ColorPickeronChange={setColor}color={color}/>;}Props
Want to help make this feature better? Pleaseshare your feedback.
interface
ColorPickerProps
- id? string
-
ID for the element.
- color
-
The currently selected color.
- allowAlpha? boolean
-
Allow user to select an alpha value.
- fullWidth? boolean
-
Allow HuePicker to take the full width.
- onChange (color:) =>void
-
Callback when color is selected.
Best practices
- Use the alpha slider if you want to allow merchants to be able to select a transparent color