Skip to content

Color item

This webcomponent represents single color item which later can be used e.g. as color item which allows user to pick product color variant.

Attributes

Attribute name Type Default Description
disable (optional) boolean false Adds a strikethrough line to the element, but it is still clickable
unclickable (optional) boolean false Make item unselectable, which is also represents by the css 'not-allowed' cursor appearance
size (optional) string null Allows to choose smaller sizes and adds the appropriate css classes. Available options are: 's' and 'xs'

DOM Events

This webcomponent dispatches the following DOM events:

Example

<h-color-item color="#048A81" size="s"></h-color-item>
<h-color-item color="#048A81" tabindex="0" role="button" aria-label="#048A81" class="color-item color-item_s" style="background-color: rgb(4, 138, 129);"></h-color-item>