ColorSwatch

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>
);
}

Size and radius

ColorSwatch does not have predefined size values, use number to set width and height in px, radius has predefined xs, sm, md, lg, xl values from theme.radius:

<ColorSwatch size={50} /> // -> { width: 50, height: 50 }
<ColorSwatch radius="lg" /> // -> theme predefined large radius
<ColorSwatch radius={10} /> // -> { borderRadius: 10 }

Custom component

Use any component or element with ColorSwatch by setting component prop:

import { useState } from 'react';
import { CheckIcon } from '@modulz/radix-icons';
import { ColorSwatch, Group, useMantineTheme } from '@mantine/core';
function Demo() {
const theme = useMantineTheme();
const [checked, setChecked] = useState(true);
return (
<Group position="center" spacing="xs">
<ColorSwatch component="a" href="https://mantine.dev" color={theme.colors.blue[6]} />
<ColorSwatch
component="button"
color={theme.colors.grape[6]}
onClick={() => setChecked((c) => !c)}
style={{ color: '#fff', cursor: 'pointer' }}
>
{checked && <CheckIcon />}
</ColorSwatch>
</Group>
);
}