ch 'classnames' { FC } 'react' s './Swatch.module.css' { Check } 'icons' Button, { ButtonProps } 'uiButton' { isDark } 'colors' SwatchProps { active?: boolean children?: any className?: string variant?: 'size' 'color' string color?: string label?: string null } Swatch: FCOmitButtonProps, 'variant' SwatchProps ({ className, color '', label null, variant 'size', active, ...props }) { variant variant?.toLowerCase() (label) { label label?.toLowerCase() } swatchClassName cn( s.swatch, { [s.active]: active, [s.size]: variant 1 'size', [s.color]: color, [s.dark]: color ? isDark(color) : true, [s.textLabel]: !color label label.length 3, }, className ) ( Button className{swatchClassName} style{color ? { backgroundColor: color } : {}} aria-label="Variant Swatch" {props} > {variant 1 'color' active ( Check / )} {variant 0 'color' ? label : null} /Button ) } Swatch