Color Swatch
Displays a color swatch, which can be used to represent colors in a UI.
Features
- Supports custom colors
- Provides an accessible label for screen readers
- Provides a color contrast for better visibility
Installation
Install the component from your command line.
sh
$ npm add reka-uiAnatomy
Import all parts and piece them together.
vue
<script setup>
import {
ColorSwatch,
} from 'reka-ui'
</script>
<template>
<ColorSwatch color="#ff0000" />
</template>API Reference
ColorSwatch
The main component that displays a color swatch.
| Prop | Default | Type |
|---|---|---|
as | 'div' | AsTag | ComponentThe element or component this component should render as. Can be overwritten by |
asChild | booleanChange the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | |
color | '' | stringThe color to display in the swatch as a hex string.
Example: |
label | stringOptional accessible label for the color. If omitted, the color name will be derived from the color value. |
| Slots (default) | Payload |
|---|---|
color | string |