docs/components/display/ColorDot

ColorDot

Decorative color dot.

import { ColorDot } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#More Examples

Blue

<ColorDot color="#3b82f6" />

Green

<ColorDot color="#22c55e" />

#Props

PropTypeDefaultDescription
color *stringColor value in any CSS format (hex, rgb, hsl, etc).
size'sm' | 'md' | 'lg''md'Size preset.
classstringAdditional CSS classes.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-border-subtle
  • --sk-icon-md
  • --sk-icon-xs
  • --sk-space-sm