ColorSwatch

Display color value
Import

Usage

Use ColorSwatch to display color:

<ColorSwatch color="#c3c3c3" />

Example with default Mantine theme colors:

import React from 'react';
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>
);
}

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 React, { 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>
);
}

Get element ref

You can get root element ref with elementRef prop:

import React, { useRef } from 'react';
import { ColorSwatch } from '@mantine/core';
function Demo() {
const ref = useRef();
return <ColorSwatch elementRef={ref} />;
}

TypeScript

You need to pass additional types to use custom component with TypeScript in case you need full type coverage for events and elementRef:

<ColorSwatch<'button', HTMLButtonElement>
component="button"
onClick={(event) => console.log(event)}
elementRef={(node) => {
window.myRef = node;
}}
/>
<ColorSwatch<typeof Link, HTMLAnchorElement>
component={Link}
onClick={(event) => console.log(event)}
elementRef={(node) => {
window.myRef = node;
}}
/>