On this page:

Dot

Note

A component that organizes content into vertically stacked collapsible and expandable sections.

Design checklist

Status	Item	Description
✔️	Anatomy	Includes descriptions of all parts of the component and its major variants.
✔️	States	Includes all applicable interaction, display and value states.
✔️	Options	Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.)
✔️	Color schemes	Includes both light and dark color schemes.
✔️	Behaviors	Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow).

Anatomy

Dot: A single <span> element with the class dot.
Size: Controlled by classes extra-small, small, medium, large, extra-large.
Color: Controlled by classes gray, orange, cyan, violet, green, red, yellow, blue, lime.
Pulse: Optional pulsing animation via the pulse class.

States

Default: Static colored dot.
Pulse: When pulse prop is true, the dot animates with a pulsing effect.
Color: Dot color changes according to the color prop.
Size: Dot size changes according to the size prop.

Options

size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' (default: 'md')
color: 'gray' | 'orange' | 'violet' | 'green' | 'red' | 'yellow' | 'blue' | 'lime' | 'cyan' (default: 'gray')
pulse: boolean (default: false)

Behaviors

Pulse animation: When pulse is enabled, the dot animates with a ping effect.
Responsive: Dot size and color adapt to props.
Purely visual: No keyboard or mouse interaction; used as a status or indicator.

Changelog

Date	Type	Description	Author	Associated issue(s)
2025-06-03	new	Initial design	Oanh Nguyen	PAR-52