v4.2.12

ColorSwatch

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

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>
  );
}
Go back
Card – @mantine/core
Up next
Image – @mantine/core
Build fully functional accessible web applications faster than ever
About
ContributeMedia assetsChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GithubGitHub discussions
Project
Mantine UIDocumentationGithub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter