Tasklist

Tasklists are designed to display multiple tasks users will have to complete to finalize a complex process (e.g. store or profile creation).

Overview

Steps

Each step is made of:

• a status icon

• a title

• a paragraph

• an illustration (optional)

• 1 or 2 buttons

Status	Description	Example
To do	Icon is blank Collapsed
Active	Icon is blank Expanded Can have 2 buttons (one Primary and one Secondary)
Done	Icon is ticked + green Can be expanded or collapsed

Tasklist has 2 modes:

• Steps have to be completed in the order in which they're listed

• Steps can be completed in any order

Guidelines

Limit the number of tasks

The component doesn't have a task limit, but we recommend restricting the number of tasks to a decent number. Think about the user's mental workload.

Group actions with similar topics into tasks

Group related requests into tasks, like "Configure your shipping settings" or "Import your catalog". This will help users understand what's expected from them and plan ahead.

Task names should start with verbs (check, configure, create, add...).

Use the subtitle to describe what the task will involve and why it matters to complete it.

Marking tasks as completed

It may happen that our users will need to state that the task is completed. Use "Mark as done" as a secondary button.