ColorPicker
Basic Usage
Show editable code example
Any Paragon component or export may be added to the code example.
() => {const [colorSm, setColorSm] = useState('')const [colorMd, setColorMd] = useState('')return (<div className="d-flex bg-light p-2" style={{ columnGap: '1rem' }}><ColorPicker color={colorSm} setColor={setColorSm} size="sm" /><ColorPicker color={colorMd} setColor={setColorMd} size="md" /></div>)}
With good and malformatted default color passed
Show editable code example
Any Paragon component or export may be added to the code example.
() => {const [color, setColor] = useState('#32116c')const [colorBad, setColorBad] = useState('#badcolor')return (<div className="d-flex bg-light p-2" style={{ columnGap: '1rem' }}><ColorPicker color={color} setColor={setColor} /><ColorPicker color={colorBad} setColor={setColorBad} /></div>)}
Theme Variables (SCSS)#
$picker-size-sm: 2rem !default;$picker-size-md: calc(1.3333em + 1.125rem + 2px) !default;
Props API#
ColorPicker Props API
- color
stringDefault''A default hex code to preset the picker to display.
- setColor
funcRequiredPassing setState function allows parent to alter the color.
- className
stringA class name to append to the base element.
- size
enum'sm' | 'md'Default'md'Size of the color picker