Components
Best Practices

Best Practices

Properties

Variant

VariantUsageExample
infoMessage without a clear semantic that doesn't require immediate attention.“There are 5 new transactions” with a View new transactions action, when in a page with outdated content
criticalAction that failed due to a technical error or a user error. Include a proposed action or, when it's not possible, explain what to do next."The font could not be deleted because it's used in styles. Please remove it from styles and try again." with a View styles action
warningUnexpected behavior or something to be cautious about. Consider including a proposed action or explaining what to do next.“The product was saved with 5 issues” and a Fix issues action
positiveAction that matched or surpassed expectations. If the action takes a while to process, use a positive Toast for the submission itself and an info Alert to indicate progress.“Product successfully created”

Icon

Each Alert variant includes a specific semantic icon that should not be customized.

Message

  • Write a brief and direct sentence with 240 characters at most. Prefer to include an action that complements the message when needed.
  • Don't use technical language. For example, use ”The invoice could not be sent because of a technical issue” instead of ”Error 298dx9283 prevented the invoice from being sent”.
  • Use sentence case, but capitalize proper nouns.
  • Don't use personal pronouns.

Action

Keep the message brief by including an action that complements it, such as to:

  • Provide more details in a modal or related page.
  • Retry a failed action.
  • Undo a successful action.
  • Focus on the first error in a form with issues.
  • Refresh outdated information on the page.

Read the Button documentation for more details.

Dismissible

Toasts are always dismissible. For non-dismissible notifications, read the Alert documentation.

Position

  • Position in a container: Considering left-to-right interfaces, Toasts pop from the bottom of the screen and rest on the lower right-hand corner. This is the default behavior and it should not be customized.
  • Multiple toasts: Avoid displaying more than one Toast at the same time. Prefer to summarize the result of an action in a single Toast. For example, use ”34 products successfully saved”.

Behavior

Timing

  • Trigger: Toasts appear immediately after an action is triggered (user presses Save) or the loading feedback is over (Button stops spinning).
  • Duration: Most Toasts should last between 5 and 10 seconds, following an average of 175 milliseconds per character. Use a permanent toast only when they require attention, such as critical Toasts, warning Toasts, and any Toast that is not the immediate result of an user action.