Color Swatch
Alpha
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-uitip
Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.
Anatomy
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.