Dot
Sizes
Preview
index.tsx
Pulse
Preview
index.tsx
Design Tokens for Dot
| Token | Color for | State/Meaning |
|---|
| --par-color-bg-dot-solid-gray | Dot background | Gray color |
| --par-color-bg-dot-solid-orange | Dot background | Orange color |
| --par-color-bg-dot-solid-cyan | Dot background | Cyan color |
| --par-color-bg-dot-solid-violet | Dot background | Violet color |
| --par-color-bg-dot-solid-green | Dot background | Green color |
| --par-color-bg-dot-solid-red | Dot background | Red color |
| --par-color-bg-dot-solid-yellow | Dot background | Yellow color |
| --par-color-bg-dot-solid-blue | Dot background | Blue color |
| --par-color-bg-dot-solid-lime | Dot background | Lime color |
Dot API Reference
<Dot />
| Prop | Type | Default | Description |
|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Dot size |
| pulse | boolean | false | Pulse animation |
| color | 'gray' | 'orange' | 'violet' | 'green' | 'red' | 'yellow' | 'blue' | 'lime' | 'cyan' | 'gray' | Dot color |
| ...spanProps | HTMLSpanElement props | | All native span props (className, style, ...) |
Note: Dot inherits all native props from HTMLSpanElement