fix(@clayui/color-picker): use ClayButton instead of button element

Author: bryceosterhaus

packages/clay-color-picker/package.json

@@ -26,6 +26,7 @@
 		"react"
 	],
 	"dependencies": {
+		"@clayui/button": "^3.5.0",
 		"@clayui/drop-down": "^3.8.4",
 		"@clayui/form": "^3.14.2",
 		"@clayui/icon": "^3.1.0",

packages/clay-color-picker/src/Splotch.tsx

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import ClayButton from '@clayui/button';
 import classNames from 'classnames';
 import React from 'react';
 import tinycolor from 'tinycolor2';
@@ -37,20 +38,20 @@ const ClayColorPickerSplotch = React.forwardRef<HTMLButtonElement, IProps>(
 			!color.isValid() || tinycolor.readability('#FFF', value) < 1.1;
 
 		return (
-			<button
+			<ClayButton
 				{...otherProps}
-				className={classNames('btn clay-color-btn', className, {
+				className={classNames('clay-color-btn', className, {
 					active,
 					'clay-color-btn-bordered': requireBorder,
 				})}
+				displayType={null}
 				ref={ref}
 				style={{
 					background: `${isHex ? '#' : ''}${value}`,
 					height: size,
 					width: size,
 				}}
 				title={value}
-				type="button"
 			/>
 		);
 	}