Use cases
Choose components based on the task your interface needs to support.
Input and submission#
Use input components for sign-up, settings, approval requests, and other forms. Label inputs clearly and use a Primary Button for the final action.
Status and feedback#
Show results after an action and progress for longer tasks. Do not rely solely on disappearing notifications for errors or other information that affects the next step.
- Brief completion messages: Toast.
- Input errors or persistent information: Inline Message or Banner.
- Loading data: Skeleton; tasks with measurable progress: Progress Bar.
- No data: Empty and a Button that suggests the next action.