Steps shows a user's progress through a sequential process. Each c-lb.steps.step accepts a colour variant and optional content, making it straightforward to mark completed, active, and upcoming stages.
Basic Steps
- Register
- Choose plan
- Purchase
- Receive Product
<c-lb.steps>
<c-lb.steps.item variant="primary">Register</c-lb.steps.item>
<c-lb.steps.item variant="primary">Choose plan</c-lb.steps.item>
<c-lb.steps.item>Purchase</c-lb.steps.item>
<c-lb.steps.item>Receive Product</c-lb.steps.item>
</c-lb.steps>
Color Variants
- Neutral
- Primary
- Secondary
- Accent
- Info
- Success
- Warning
- Error
<c-lb.steps>
<c-lb.steps.item variant="neutral">Neutral</c-lb.steps.item>
<c-lb.steps.item variant="primary">Primary</c-lb.steps.item>
<c-lb.steps.item variant="secondary">Secondary</c-lb.steps.item>
<c-lb.steps.item variant="accent">Accent</c-lb.steps.item>
<c-lb.steps.item variant="info">Info</c-lb.steps.item>
<c-lb.steps.item variant="success">Success</c-lb.steps.item>
<c-lb.steps.item variant="warning">Warning</c-lb.steps.item>
<c-lb.steps.item variant="error">Error</c-lb.steps.item>
</c-lb.steps>
Vertical
- Register
- Choose plan
- Purchase
- Receive Product
<c-lb.steps direction="vertical">
<c-lb.steps.item variant="primary">Register</c-lb.steps.item>
<c-lb.steps.item variant="primary">Choose plan</c-lb.steps.item>
<c-lb.steps.item>Purchase</c-lb.steps.item>
<c-lb.steps.item>Receive Product</c-lb.steps.item>
</c-lb.steps>
Custom Content
- Step 1
- Step 2
- Step 3
- Step 4
<c-lb.steps>
<c-lb.steps.item variant="neutral" content="?">Step 1</c-lb.steps.item>
<c-lb.steps.item variant="neutral" content="!">Step 2</c-lb.steps.item>
<c-lb.steps.item variant="neutral" content="✓">Step 3</c-lb.steps.item>
<c-lb.steps.item variant="neutral" content="✗">Step 4</c-lb.steps.item>
</c-lb.steps>
With Icons
- Register
- Cart
- Payment
- Confirm
<c-lb.steps>
<c-lb.steps.item variant="primary" icon="rmx.user">Register</c-lb.steps.item>
<c-lb.steps.item variant="primary" icon="rmx.shopping-cart">Cart</c-lb.steps.item>
<c-lb.steps.item variant="primary" icon="rmx.bank-card">Payment</c-lb.steps.item>
<c-lb.steps.item icon="rmx.check">Confirm</c-lb.steps.item>
</c-lb.steps>
API Reference
c-lb.steps
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| direction |
horizontal
vertical
|
horizontal
|
No | Steps layout direction |
| Slot Name | Description |
|---|---|
| default | Step items using steps.item components |
c-lb.steps.item
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| class | string | - | No | Additional CSS classes to apply |
| variant |
neutral
primary
secondary
accent
info
success
warning
error
|
- | No | Step color variant |
| content | string | - | No | Custom data-content for the step marker (e.g., a checkmark or symbol) |
| icon | string | - | No | Icon name to display |
| ↳ .fill | modifier | - | No | Render in filled (solid) style |
| icon.class | string | - | No | Additional CSS classes for the icon |
| Slot Name | Description |
|---|---|
| default | Step label text |