Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - progress-steps
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<p><em>Not all multi-step tasks need Progress Steps</em>. Tasks that are short, straightforward, and linear probably don't need the extra layer of information that Progress Steps provides.</p> <p>Each step can communicate one of these statuses:</p> <ul> <li><strong>Complete</strong>: The user has completed this step with no more action needed.</li> <li><strong>Incomplete</strong>: The user has interacted with this step but there is still more action needed.</li> <li><strong>Current</strong>: The user is currently on this step.</li> <li><strong>Error</strong>: The user has interacted with this step but more action is required that will prevent completing the full task.</li> <li><strong>Incomplete + Disabled</strong>: This step is not yet reached by a user.</li> </ul> <h3>Accessibility</h3> <ul> <li>Give each step a concise label describing what the goal of that step is.</li> <li>Each step icon has a <code>title</code> prop whose value is the current status of that step (e.g. complete, incomplete, etc.) to inform screen readers of a step's status. This label is adjustable for internationalization.</li> <li>The ProgressStep has <code>role=list</code> and each step has <code>role=listitem</code> for screen readers.</li> <li>The ProgressStep has <code>aria-current</code> set to <code>step</code> for the current step.</li> </ul> <h2>Examples</h2> <h3>Progress Steps as buttons</h3> <p>Use Progress Steps as buttons when each step triggers an in-page action and doesn't have a unique URL. We recommend using this button action to save information in each step.</p> <p>Only button steps may be disabled.</p> <div class="example-section"> <div id="button-example"></div> </div> <h3>Progress Steps as anchors</h3> <p>Use Progress Steps as anchors when each step links to other pages and has a unique URL.</p> <div class="example-section"> <div id="anchor-example"></div> </div> <h3>Non-interactive Progress Steps</h3> <p>Use Progress Steps as divs when steps have no need for user interaction.</p> <div class="example-section"> <div id="div-example"></div> </div> <h3>Progress Steps represented vertically</h3> <p>You can use vertical Progress Steps when the content of the task is tall and narrow, or you need to add additional content to each step.</p> <div class="example-section"> <div id="vertical-example"></div> </div> <h4>Additional content</h4> <p>Use <code>ProgressStepContent</code> to add additional content to non-interactive vertical Progress Steps.</p> <div class="warning-callout"> <h5 style="color: #F7931E; margin-top: 0;">Steps that are completed in other pages and have unique URLs do not automatically track status.</h5> <p style="margin-bottom: 0;">Implement the logic locally to ensure the step's status is accurately reflected within the Progress Steps component.</p> </div> <div class="example-section"> <div id="additional-content-example"></div> </div> <h3>Internationalization</h3> <p>Each step within the Progress Steps component has a label which can be set to adjust the icon's title for internationalization.</p> <div class="example-section"> <div id="i18n-example"></div> </div> <h2>Composition Notes</h2> <ul> <li>Each step must have a label. Keep the label concise with fewer than 5 words per label.</li> <li>Skip articles like "a" or "the" to shorten the step.</li> <li>Generally, start each step with a verb to keep the user grounded in the task at hand.</li> <li>If the process has 5 steps and describing each one with a verb + noun is too long, consider shortening the step labels to just a verb, and using the in-page step label to clarify the full scope of the task.</li> <li>Keep the placement of Progress Steps consistent between different pages (steps).</li> </ul> <div class="neutral-callout"> <p style="margin-bottom: 0;">ProgressStepSeparator is no longer required starting v2.2.1. The separator is now automatically added between each step using CSS. It is backwards compatible, so previous versions will still work.</p> </div> <h3>When to use an error step</h3> <p>Show the error status on a step when it's not the current step they're on. When a user navigates to the step that has errors, use <code>ProgressStepCurrent</code> to set the status of the step to current, and use in-page validation to then communicate the errors in the current page.</p> <h2>Do and don't</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Progress Steps for complex tasks with 3–5 steps that can't be completed in one session.</p> <div id="do-example-1"></div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Progress Steps for every single kind of task that has multiple steps. A line of text can be used as an alternative to show progression (e.g., "Step 1 of 2")</p> <div id="dont-example-1"></div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Make the labels of each step short, descriptive, and consistent. Use fewer than 5 words for each step label.</p> <div id="do-example-2"></div> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use long or inconsistent labels with mismatched parts of speech.</p> <div id="dont-example-2"></div> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Keep Progress Steps in a consistent location between steps or pages.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't change the placement of Progress Steps between steps or pages.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Include only one Progress Steps component per task or page.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't embed a Progress Steps component within a task that's already being tracked with another Progress Steps component. Don't use multiple Progress Steps per page.</p> </div> </div> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Wait for components to load setTimeout(() => { const { ProgressSteps, ProgressStepIncomplete, ProgressStepComplete, ProgressStepCurrent, ProgressStepError, ProgressStepContent, Box, Button, ButtonGroup, Avatar, Heading, Paragraph, BusinessIcon } = window.PasteComponents; // Button Example const buttonExample = document.getElementById('button-example'); if (buttonExample) { buttonExample.innerHTML = ` <paste-progress-steps> <paste-progress-step-complete as="button" onclick="alert('Step 1 clicked')">Create profile</paste-progress-step-complete> <paste-progress-step-current as="button" onclick="alert('Step 2 clicked')">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="button" disabled onclick="alert('Step 3 clicked')">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } // Anchor Example const anchorExample = document.getElementById('anchor-example'); if (anchorExample) { anchorExample.innerHTML = ` <paste-progress-steps> <paste-progress-step-complete as="a" href="#step1">Create profile</paste-progress-step-complete> <paste-progress-step-current as="a" href="#step2">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="a" href="#step3">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } // Div Example const divExample = document.getElementById('div-example'); if (divExample) { divExample.innerHTML = ` <paste-progress-steps> <paste-progress-step-complete as="div">Create profile</paste-progress-step-complete> <paste-progress-step-current as="div">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="div">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } // Vertical Example const verticalExample = document.getElementById('vertical-example'); if (verticalExample) { verticalExample.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div">Create profile</paste-progress-step-complete> <paste-progress-step-current as="div">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="div">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } // Additional Content Example const additionalContentExample = document.getElementById('additional-content-example'); if (additionalContentExample) { additionalContentExample.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div"> Create profile <paste-progress-step-content> <paste-paragraph>Complete your business profile with all required information.</paste-paragraph> </paste-progress-step-content> </paste-progress-step-complete> <paste-progress-step-current as="div"> Register brand <paste-progress-step-content> <paste-paragraph>Register your brand for A2P messaging compliance.</paste-paragraph> <paste-button-group> <paste-button variant="primary">Continue</paste-button> <paste-button variant="secondary">Save for later</paste-button> </paste-button-group> </paste-progress-step-content> </paste-progress-step-current> <paste-progress-step-incomplete as="div"> Register campaign <paste-progress-step-content> <paste-paragraph>Set up your messaging campaign details.</paste-paragraph> </paste-progress-step-content> </paste-progress-step-incomplete> </paste-progress-steps> `; } // I18n Example const i18nExample = document.getElementById('i18n-example'); if (i18nExample) { i18nExample.innerHTML = ` <paste-progress-steps> <paste-progress-step-complete as="div" label="Completado">Crear perfil</paste-progress-step-complete> <paste-progress-step-current as="div" label="Actual">Registrar marca</paste-progress-step-current> <paste-progress-step-incomplete as="div" label="Incompleto">Registrar campaña</paste-progress-step-incomplete> </paste-progress-steps> `; } // Do/Don't Examples const doExample1 = document.getElementById('do-example-1'); if (doExample1) { doExample1.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div">Create profile</paste-progress-step-complete> <paste-progress-step-current as="div">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="div">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } const dontExample1 = document.getElementById('dont-example-1'); if (dontExample1) { dontExample1.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div">Name</paste-progress-step-complete> <paste-progress-step-current as="div">Email</paste-progress-step-current> <paste-progress-step-incomplete as="div">Password</paste-progress-step-incomplete> </paste-progress-steps> `; } const doExample2 = document.getElementById('do-example-2'); if (doExample2) { doExample2.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div">Create profile</paste-progress-step-complete> <paste-progress-step-current as="div">Register brand</paste-progress-step-current> <paste-progress-step-incomplete as="div">Register campaign</paste-progress-step-incomplete> </paste-progress-steps> `; } const dontExample2 = document.getElementById('dont-example-2'); if (dontExample2) { dontExample2.innerHTML = ` <paste-progress-steps orientation="vertical"> <paste-progress-step-complete as="div">Business profile for your primary business account</paste-progress-step-complete> <paste-progress-step-current as="div">A2P brand</paste-progress-step-current> <paste-progress-step-incomplete as="div">Finalize campaign registration</paste-progress-step-incomplete> </paste-progress-steps> `; } }, 1000); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">