All components (204)
Setup list
Management · OnboardingList · .amset-start
What it is and when to use it
The setup list: what is missing to have the account ready. Progress is shown in a bar and in writing ("2 of 5 done"), because a bar alone does not say how much is left.
When to use it
- The first days of a new account: create the store, fill in the tax details, upload the first product, connect payment.
- Each step with its
action(a button or a link to do it): only the next pending one shows it. optionalfor what can be left for later: it does not prevent the setup from being considered finished.
When not to
- A form split into steps that are filled in one after another:
Wizard. - The progress of something that does not depend on whoever is looking (an order on its way):
OrderStatus.
Keyboard: it has no keyboard of its own. The only interactive thing is the action of the next step, with its Tab stop.
Accessibility: it is a region with the name from label, and the steps are an ordered list. The bar is named with the title (or with label, if there is no title) and the count ("Set up your store: 2 of 5 done"), only once. What is done carries its mark and the word "Done" hidden from view: a green tick cannot be read or told apart without seeing the color. The next pending step stands out and is the only one that shows its button, because five calls to action at once guide nobody. With everything required done, the count changes to "All set" and the completed text appears.
Fine-tuning: CSS variables --amset-start-*: -brand, -brand-font, -brand-icon, -detail, -gap, -name, -radius, -step-gap, -step-padding, -title. The size moves the padding of the step, the circle with its number and the font sizes.
What it looks like
- Hecho: Create the account
- Hecho: Upload the logo
- Invite the teamUp to five people
<OnboardingList
label="Getting started"
steps={[
{ key: 'cuenta', title: 'Create the account', done: true },
{ key: 'equipo', title: 'Invite the team', done: false },
]}
/>Props
Import it with import { OnboardingList } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
labelrequired | string | What the list is about. Required: it names the region. |
stepsrequired | readonly OnboardingStep[] | — |
className | string | Merged with the library classes; it does not replace them. |
completed | string | Text for when everything is already done. |
size | "sm" | "md" | "lg" | — |
title | string | Visible title. Without it, only the count is seen. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
CSS variables
These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.
| Variable | Default |
|---|---|
--amset-start-gap | var(--amset-space-4) |
--amset-start-title | var(--amset-text-lg) |
--amset-start-step-padding | var(--amset-space-3) |
--amset-start-step-gap | var(--amset-space-3) |
--amset-start-radius | var(--amset-radius) |
--amset-start-brand | 1.25rem |
--amset-start-brand-icon | 0.875rem |
--amset-start-brand-font | var(--amset-text-xs) |
--amset-start-name | var(--amset-text-base) |
--amset-start-detail | var(--amset-text-sm) |
How to change it
.amset-start {
--amset-start-gap: ...;
--amset-start-title: ...;
}In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: