Use Color Swatches...
- To provide a visual representation of available colors for selection.
- To allow users to compare and make more informed color decisions.
- To help users with color blindness to make accurate color choices by including textual labels.
Don't use Color Swatches...
- When color choice is not critical to the task as it can add clutter.
- As is when there is a large set of Color Swatches. Use Accordion with
skin="color-swatches"instead.
Always use the ColorSwatches wrapper to encase one or more ColorSwatch items to ensure they are properly styled.
Use an accessibleText attribute (for color-blind users) on each swatch. Its value is a localized description of the color choice, such as accessibleText="Light Blue".
ShareSuper
Use size="super" to display a bigger swatch.
Fill
By default, color swatches have a transparent background.
- In the React API, use the
primaryColorproperty, and thesecondaryColorproperty if needed, to define the colors. - In the Vanilla API, define each swatch's
background-colorCSS property, either with an inlinestyleattribute, or via an external stylesheet. To create a two-tone swatch, use the CSSbackground-colorattribute to define the shade on the bottom (bottom/right when using linear gradient) and the CSScolorattribute to define the color on the top (top/left when using linear gradient).
Primary Color
Use primaryColor to display a one-tone swatch.
Secondary Color
Use both primaryColor and secondaryColor to display a two-tone swatch.
Gradient
Use either gradient="linear" or gradient="radial" to display a two-tone swatch as a gradient, rather than as two distinct color zones.
Background Image
Use backgroundImage to display an image instead of a color.
Label position
Use labelPosition on ColorSwatches to change for all swatches the default top position of the accessibleText that appears on hover.
Use labelPosition on one or several ColorSwatch items to change their position individually. This value overrides the general value passed on ColorSwatches.
Color Swatches More
Use ColorSwatchesMore, filling it with a + sign and a number, to indicate how many swatches are available, if there is not enough space to show them all.
With a Selection Set
Use a Selection Set to present a collection of color samples the customer can choose from.
- In the React API, add
as="span"to each swatch. - In the Vanilla API, use a
spantags for a valid HTML, since the swatches are insidelabeltags.
Refer to the Selection Set’s Accessibility documentation.
Radio Buttons
Use with variant="single-select" to prompt users to choose from a set of mutually-exclusive choices (Radio Button behavior).
Checkboxes
Use with variant="multi-select" to prompt users to select more than one option (Checkbox behavior).
With an Accordion
Refer to Accordion with skin="color-swatches" to wrap a large set of Color Swatches, to avoid making the content excessively tall.
Disabled
For color swatches not acting as radio buttons or checkboxes, add the swan-color-swatch-disabled CSS class to the swatch itself.
For color swatches acting as radio buttons or checkboxes, use disabled on the associated input tag to set the swatch with the corresponding disabled state.
