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" },
  },

  sizes: {
    xs: {
      container: { boxSize: "6", rounded: "sm" },
      overlay: { rounded: "sm" },
    },
    sm: {
      container: { boxSize: "8", rounded: "md" },
      overlay: { rounded: "md" },
    },
    md: {
      container: { boxSize: "10", rounded: "md" },
      overlay: { rounded: "md" },
    },
    lg: {
      container: { boxSize: "12", rounded: "md" },
      overlay: { rounded: "md" },
    },
  },

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

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

Copied!

Edit this page on GitHub

PreviousInfiniteScrollArea NextMarkdown