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 the 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 the component prop:

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

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

Polymorphic components with TypeScript

Note that polymorphic component prop types are different from regular components – they do not extend HTML element props of the default element. For example, ColorSwatchProps does not extend React.ComponentProps'<'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 the 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<'button', keyof ColorSwatchProps> {}

Expand code

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

Example of using ColorSwatch as a button:

import { useState } from 'react';
import { ColorSwatch, CheckIcon } 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 size={12} />}
    </ColorSwatch>
  );
}