diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index ef104e9f711..25006528e42 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/src-docs/src/views/color_picker/color_picker_example.js
@@ -91,7 +91,7 @@ const inlineSnippet = `<EuiColorPicker
   onChange={handleChange}
   color={chosenColor}
   isInvalid={hasErrors}
-  inline={true}
+  display="inline"
 />
 `;
 
@@ -240,8 +240,9 @@ export const ColorPickerExample = {
       ],
       text: (
         <p>
-          Use the <EuiCode>inline</EuiCode> prop to display the color picker
-          without an input or popover.
+          Set the <EuiCode>display</EuiCode> prop to `inline` to display the
+          color picker without an input or popover. Note that the{' '}
+          <EuiCode>button</EuiCode> prop will be ignored in this case.
         </p>
       ),
       snippet: inlineSnippet,
diff --git a/src-docs/src/views/color_picker/inline.js b/src-docs/src/views/color_picker/inline.js
index 918363f82ad..3c7f16b1706 100644
--- a/src-docs/src/views/color_picker/inline.js
+++ b/src-docs/src/views/color_picker/inline.js
@@ -23,7 +23,7 @@ export class Inline extends Component {
         onChange={this.handleChange}
         color={this.state.color}
         isInvalid={hasErrors}
-        inline={true}
+        display="inline"
       />
     );
   }
diff --git a/src/components/color_picker/color_picker.test.tsx b/src/components/color_picker/color_picker.test.tsx
index c7389eed625..ded63a48173 100644
--- a/src/components/color_picker/color_picker.test.tsx
+++ b/src/components/color_picker/color_picker.test.tsx
@@ -72,7 +72,7 @@ test('renders inline EuiColorPicker', () => {
     <EuiColorPicker
       onChange={onChange}
       color="#ffeedd"
-      inline={true}
+      display="inline"
       {...requiredProps}
     />
   );
diff --git a/src/components/color_picker/color_picker.tsx b/src/components/color_picker/color_picker.tsx
index 084a9a16bf9..d60163f471e 100644
--- a/src/components/color_picker/color_picker.tsx
+++ b/src/components/color_picker/color_picker.tsx
@@ -33,6 +33,7 @@ import {
 import { EuiHue } from './hue';
 import { EuiSaturation } from './saturation';
 
+type EuiColorPickerDisplay = 'default' | 'inline';
 type EuiColorPickerMode = 'default' | 'swatch' | 'picker';
 
 interface HTMLDivElementOverrides {
@@ -56,6 +57,7 @@ export interface EuiColorPickerProps
    *  Use the compressed style for EuiFieldText
    */
   compressed?: boolean;
+  display?: EuiColorPickerDisplay;
   disabled?: boolean;
   fullWidth?: boolean;
   id?: string;
@@ -94,9 +96,9 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
   color,
   compressed = false,
   disabled,
+  display = 'default',
   fullWidth = false,
   id,
-  inline = false,
   isInvalid,
   mode = 'default',
   onBlur,
@@ -354,7 +356,7 @@ export const EuiColorPicker: FunctionComponent<EuiColorPickerProps> = ({
     );
   }
 
-  return inline ? (
+  return display === 'inline' ? (
     <div className={classes}>{composite}</div>
   ) : (
     <EuiPopover