v3.6.14
Discord
Source code

ColorSwatch

Display color swatch
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

Usage

Use ColorSwatch to display color:

<ColorSwatch color="#c3c3c3" />

Example with default Mantine theme 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.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>
  );
}

Get root element ref

You can get root element ref with ref prop:

import { useRef } from 'react';
import { ColorSwatch } from '@mantine/core';


function Demo() {
  const ref = useRef();
  return <ColorSwatch ref={ref} />;
}
Go back
Card – @mantine/core
Up next
Image – @mantine/core
Build fully functional accessible web applications faster than ever
Project
Contribute to MantineMedia assetsChangelogReleases
Community
Join Discord communityFollow on TwitterEmail newsletterGitHub discussions
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter