Swatch

A Swatch represents a color, pattern, texture, or other graphical element.

Overview

Swatches can be used independently as non-interactive graphical representations, or within Swatch Groups to facilitate selection, filtering, and toggling workflows.

Usage

• Represent colors or patterns in a legend
• Indicate a selected color

Sample

Best practices

Use standalone swatches to represent colors or patterns in a legend or other non-interactive context. Multiple Swatch components can be used together within Swatch Groups to facilitate user choice or action.

Setting colors

The color property accepts any valid CSS color format, including hex, rgb, and hsl. You can also use rgba and hsla to set colors with opacity. To use the swatch to indicate an absence of color, omit the color property.

Using patterns

To display a pattern or other graphical fill, add a child element within the image slot. This can be an <img> element or a <div> with a background image set via CSS. To display both a color and a pattern, set the color property and add a child element with the image slot. The slotted element will be positioned over the swatch's color fill - this can be useful for displaying how a pattern or image with transparency may appear over a solid color.

API reference

Properties

Styles

Events

Methods