ColorSwatchpolymorphic

Display color swatch
Import

Usage

import { ColorSwatch, Group, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const swatches = Object.keys(theme.colors).map((color) => (
<ColorSwatch key={color} color={theme.colors[color][6]} />
));
return (
<Group position="center" spacing="xs">
{swatches}
</Group>
);
}

Alpha channel

Color swatch has checkers background – you can use it to show transparency in colors:

import { ColorSwatch, Group, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const swatches = Object.keys(theme.colors).map((color) => (
<ColorSwatch key={color} color={theme.fn.rgba(theme.colors[color][6], 0.5)} />
));
return (
<Group position="center" spacing="xs">
{swatches}
</Group>
);
}

Polymorphic component

ColorSwatch is a polymorphic component component, you can change root element:

import { useState } from 'react';
import { ColorSwatch, Group, useMantineTheme, CheckIcon, rem } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const [checked, setChecked] = useState(true);
return (
<Group position="center" spacing="xs">
<ColorSwatch
component="button"
color={theme.colors.grape[6]}
onClick={() => setChecked((c) => !c)}
sx={{ color: '#fff', cursor: 'pointer' }}
>
{checked && <CheckIcon width={rem(10)} />}
</ColorSwatch>
</Group>
);
}

ColorSwatch component props

NameTypeDescription
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