Inline prompt
Inline prompts appear alongside a specific component on the screen. They help the user stay informed, fix something, or get more out of what they're doing.
Variants
There are 5 different types of inline prompts — error, warning, neutral, success and proposition. Each has a different use case and rules around their implementation.
Error
Use an error to let users know when something has gone wrong and needs their attention. Clearly state the issue and explain how to fix it.
Warning
Use a warning when you need to alert users to potential issues that could impact their experience. These messages are preventative — they help users take action to avoid negative outcomes.
Neutral
Use a neutral prompt when you need to guide the user or give additional context. Neutral prompts can transition to a success or error message when used in a form.
Success
Use a success prompt to communicate that an action or process was completed successfully. Keep it brief — a simple confirmation is enough.
Proposition
Use a proposition to encourage the user to take an action that might benefit them. Use icons that relate to the message. Frontload the benefit — make the value clear in the first few words.
Custom icons
You can pass a custom icon via the icon prop. Make sure the icon is relevant to the message.