ColorSwatch

Usage

import { ColorSwatch, Group } from '@mantine/core';

function Demo() {
  return (
    <Group>
      <ColorSwatch color="#009790" />
      <ColorSwatch color="rgba(234, 22, 174, 0.5)" />
      <ColorSwatch color="var(--mantine-color-orange-5)" />
    </Group>
  );
}

withShadow

By default, ColorSwatch has an inner box-shadow to make it more visible on light backgrounds, you can disable it by setting withShadow={false} prop:

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

function Demo() {
  return <ColorSwatch color="rgba(255, 255, 255, 0.7)" />;
}

Polymorphic component

ColorSwatch is a polymorphic component – its default root element is div, but it can be changed to any other element or component with component prop:

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

function Demo() {
  return <ColorSwatch component="a" />;
}

You can also use components in component prop, for example, Next.js Link:

import Link from 'next/link';
import { ColorSwatch } from '@mantine/core';

function Demo() {
  return <ColorSwatch component={Link} href="/" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, ColorSwatchProps does not extend React.ComponentPropsWithoutRef'<'div'>' although div is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:

import type { ColorSwatchProps, ElementProps } from '@mantine/core';

interface MyColorSwatchProps extends ColorSwatchProps,
  ElementProps<'a', keyof ColorSwatchProps> {}

If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

import { useState } from 'react';
import { ColorSwatch, CheckIcon, rem } from '@mantine/core';

function Demo() {
  const [checked, setChecked] = useState(true);

  return (
    <ColorSwatch
      component="button"
      color="var(--mantine-color-grape-6)"
      onClick={() => setChecked((c) => !c)}
      style={{ color: '#fff', cursor: 'pointer' }}
    >
      {checked && <CheckIcon style={{ width: rem(12), height: rem(12) }} />}
    </ColorSwatch>
  );
}