Usage
Alpha channel
Color swatch has checkers background – you can use it to show transparency in colors:
Polymorphic component
ColorSwatch is a polymorphic component component, you can change root element:
ColorSwatch component props
Name | Type | Description |
---|---|---|
children | ReactNode | ColorSwatch children |
color * | string | Swatch background-color in any css valid format (hex, rgb, etc.) |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
size | string | number | Width and height |
withShadow | boolean | Determines whether swatch should have inner shadow |