sp-swatch
Attributes and Properties #
border border SwatchBorder color color string '' label label string '' mixedValue mixed-value boolean false nothing nothing boolean false role role string 'button' rounding rounding SwatchRounding selected selected boolean false shape shape SwatchShape value value string Events #
change Event Description #
An <sp-swatch> shows a small sample of a fill — such as a color, gradient, texture, or material — that is intended to be applied to an object.
Usage #
yarn add @spectrum-web-components/swatch
Import the side effectful registration of <sp-swatch> via:
import '@spectrum-web-components/swatch/sp-swatch.js';
When looking to leverage the Swatch base class as a type and/or for extension purposes, do so via:
import { Swatch } from '@spectrum-web-components/swatch';
Sizes #
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="xs"></sp-swatch>
<sp-swatch nothing size="xs"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="xs"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="xs"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="xs"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="s"></sp-swatch>
<sp-swatch nothing size="s"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="s"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="s"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="s"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="m"></sp-swatch>
<sp-swatch nothing size="m"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="m"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="m"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="m"
></sp-swatch>
</div>
<div style="display: flex;gap: 5px;">
<sp-swatch color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch rounding="full" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="light" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch border="none" color="rgb(255 0 0 / 0.7)" size="l"></sp-swatch>
<sp-swatch nothing size="l"></sp-swatch>
<sp-swatch
shape="rectangle"
color="rgb(255 0 0 / 0.7)"
size="l"
></sp-swatch>
<sp-swatch
shape="rectangle"
disabled
color="rgb(255 0 0 / 0.7)"
size="l"
></sp-swatch>
<sp-swatch
rounding="full"
shape="rectangle"
mixed-value
size="l"
></sp-swatch>
</div>
Modifying attributes #
An <sp-swatch> element can be modified by the following attributes/properties to customize its delivery as desired for your use case: border, color, disabled, mixedValue (accepted as the mixed-value attribute), nothing, rounding, and shape. Use these in concert with each other for a variety of final visual deliveries.
Border #
The border attribute/property is not required and when applied accepts the values of none or light.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="light"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" border="none"></sp-swatch>
</sp-swatch-group>
Color #
The color attribute/property determines the color value that the <sp-swatch> element will deliver.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="orange"></sp-swatch>
<sp-swatch color="var(--spectrum-global-color-magenta-500)"></sp-swatch>
</sp-swatch-group>
Disabled #
The disabled attribute/property determines prevents interaction on the <sp-swatch> element.
<sp-swatch-group>
<sp-swatch disabled color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch disabled color="orange"></sp-swatch>
<sp-swatch
disabled
color="var(--spectrum-global-color-magenta-500)"
></sp-swatch>
</sp-swatch-group>
Mixed value #
The mixed-value attribute and mixedValue property outline when an <sp-swatch> element represents more than one color.
<sp-swatch-group>
<sp-swatch mixed-value></sp-swatch>
<sp-swatch mixed-value rounding="full"></sp-swatch>
<sp-swatch mixed-value shape="rectangle"></sp-swatch>
</sp-swatch-group>
Nothing #
The nothing attribute/property outlines that the <sp-swatch> represents no color or that it represents "transparent".
<sp-swatch-group>
<sp-swatch nothing></sp-swatch>
<sp-swatch nothing rounding="full"></sp-swatch>
<sp-swatch nothing shape="rectangle"></sp-swatch>
</sp-swatch-group>
Rounding #
The rounding attribute/property is not required and when applied accepts the values of none or full.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="none"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" rounding="full"></sp-swatch>
</sp-swatch-group>
Shape #
The shape attribute/property is not required and when applied accepts the values of rectangle.
<sp-swatch-group>
<sp-swatch color="rgb(255 0 0 / 0.7)"></sp-swatch>
<sp-swatch color="rgb(255 0 0 / 0.7)" shape="rectangle"></sp-swatch>
</sp-swatch-group>