Documentation Index
Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
Use this file to discover all available pages before exploring further.
Overview
Stepper 10 is a multi-step progress indicator component displaying three sequential steps. Each step features a circular badge showing a number or a checkmark icon (when completed), a step label, and a connecting line between steps. It uses a custom state to track the current active step, visually differentiating between completed, active, and inactive steps through color and icon changes.How to use
States
This component includes conditional states that automatically change its appearance.| State | Trigger | Visual effect |
|---|---|---|
| Step Active | Current step equals the step number | Step circle background turns dark and number text color changes to white |
| Step Completed | Current step is greater than the step number | Number text is hidden and a white checkmark icon appears; circle and connector line turn dark |
| Step Inactive | Current step is less than the step number | Step circle remains light grey with muted number text; no checkmark shown |
| Mobile Hidden Label | Page width is less than or equal to mobile breakpoint | Step label text is hidden to save horizontal space on mobile screens |
These states are handled natively by Bubble and require no additional setup.
They will work automatically once the component is pasted into your editor.
Responsive
This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble’s built-in mobile breakpoint.Workflows
This component includes pre-built workflows.| Trigger | Action |
|---|---|
| BT - Step 01 - Stepper 10 is clicked | Sets the custom state ‘step_’ on the parent group to value 1 |
| BT - Step 02 - Stepper 10 is clicked | Sets the custom state ‘step_’ on the parent group to value 2 |
| BT - Step 03 - Stepper 10 is clicked | Sets the custom state ‘step_’ on the parent group to value 3 |
These workflows are included when you use the Copy with Workflows option in the Brikl panel.
Requirements
| License | Starter plan required |
| Plugins | None |
| Custom code | Not required |
Platforms
| Platform | Supported |
|---|---|
| Web | ✅ |
| Mobile | ✅ |
License
This component requires a Starter plan.