## Feature Examples ### Size - description:

Adjust the component's size using the size prop. It supports 3 sizes:

  • Use large to emphasize the input field.
  • Use medium for all common cases (default).
  • Use small when the layout is dense and narrow.
    • - example: ```jsx ; ``` ### Status - description:

    Indicate the component's status using the status prop. It has three states:

  • Use the error state to indicate an invalid value (e.g., a HEX value that doesn’t exist).
  • Use the warning state to highlight a value that can cause an unwanted result (e.g., text color is the same as the background color).
  • Use the loading state to show the value is currently being saved or validated.
    • - example: ```jsx ; ``` ### Status message - description:

    Add text that explains the status or what action the user should take with the statusMessage prop.

    Showing the status message inline, directly below the input is preferred in all default cases.

  • To add an accessible inline message, wrap the component in a and add the statusMessage.
  • To add a status message in a tooltip that requires users to hover on the icon, use the statusMessage prop. Control tooltip placement with tooltipPlacement prop.

    • View more inline status message examples in .

    - example: ```jsx For all default cases: For narrow layouts only: ; ``` ### Disabled - description:

    Prevent the user from using the color input field with the disabled prop. Use it to indicate that the field is unavailable for editing (e.g., if the element already has a pre-defined color that can't be changed).

    - example: ```jsx () => { const [presets, setPresets] = React.useState([ 'midnightblue', 'darkmagenta', 'lightcoral', ]); return ( setPresets([...presets, color])} colorPickerChildren={({ changeColor }) => ( )} /> ); }; ``` ### Popover - description:

    Adjust the placement and behavior of the color picker popover by using any of the properties in popoverProps. Check the component API for a full list.

    - example: ```jsx Popover placement: Left Animate: true ; ``` ### Add color presets - description:

    Allow users to add new color presets inside the color picker by clicking an "Add color" button. Use a combination of the colorPickerChildren and the onAddColor properties to add this ability.

    - example: ```jsx () => { const [presets, setPresets] = React.useState([ 'midnightblue', 'darkmagenta', 'lightcoral', ]); return ( setPresets([...presets, color])} colorPickerChildren={({ changeColor }) => ( )} /> ); }; ``` ## Common Use Case Examples ### Custom text color - description:

    Use color input in a variety of composers to define custom colors for text, background fills, icons, etc.

    - example: ```jsx () => { const [color, setColor] = React.useState('#000000'); const [alignment, setAlignment] = React.useState(0); const [text, setText] = React.useState('Luna Boutique'); return ( Change the font, color and more to make your text stand out. setText(e.target.value)} /> Playfair Display - 700 setAlignment(0)} > setAlignment(1)} > setAlignment(2)} > ); }; ```