Components / Steps
Steps
Step indicator with vertical/horizontal mode, 4 status states (done/active/pending/error), clickable steps, connecting lines, and active pulse animation.
navigation v0.1.0
Playground
Examples
Vertical
<cg-steps clickable></cg-steps>Horizontal
<cg-steps direction="horizontal"></cg-steps>With error
<cg-steps></cg-steps>Compact
<cg-steps compact></cg-steps>Import
import { CgSteps } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-steps';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
items | StepItem[] | — | Step definitions — {title, description?, status?} |
direction | "vertical" | "horizontal" | "vertical" | Layout direction |
clickable | boolean | false | Enable step click events |
compact | boolean | false | Smaller circles and text |
Events
| Event | Detail | Description |
|---|---|---|
cg-step-click | {index, item} | Step clicked |