ColorSwatch

ColorSwatch is a component that displays color samples.

Theming

The ColorSwatch is a multi part component.

If you want to change the style of the component, please check here.

export const ColorSwatch: ComponentMultiStyle<"ColorSwatch"> = {
  baseStyle: {
    container: {},
    overlay: { boxSize: "full" },
  },

  variants: {
    basic: {
      container: { rounded: "md" },
      overlay: { rounded: "md" },
    },
    rounded: {
      container: { rounded: "full" },
      overlay: { rounded: "full" },
    },
  },

  sizes: {
    sm: {
      container: { boxSize: "6" },
    },
    md: {
      container: { boxSize: "8" },
    },
    lg: {
      container: { boxSize: "10" },
    },
  },

  defaultProps: {
    variant: "basic",
    size: "md",
  },
}

Copied!

Edit this page on GitHub

PreviousInfiniteScrollArea NextMarkdown