preview

The preview shows the sample of the fill that the swatch represents. This property can be a color, gradient, texture, or material. The exact format this property takes will depend on implementation. Some examples of the format include color values, image, canvas, and gradient.

size

Swatches come in four different sizes: extra-small, small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.

shape

Swatches can have a square or a rectangle shape (aspect ratio of 2:1). The square shape is the default and is used in swatch groups (e.g., a palette of colors).

cornerRounding

By default, swatches have partial rounding. There are 3 options for a swatch's rounding: none, partial rounding, and full rounding.

Partial rounding and full rounding are usually used when a swatch is presented by itself near other components. A rounding of "none" is used in a swatch group to help minimize the Hermann grid illusion that happens at the intersections of white space in the group.

isSelected

A swatch can have a selected state to allow for selection. This is often used in a swatch group.

isDisabled

A swatch in a disabled state shows that the swatch exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that a swatch may become available later. Disabled swatches should be used with caution.