Alert

The alerts appear on the top of the screen and they display critical information about loss of data, functionality, error, etc.

Best practices

Avoid displaying more than one alert at a time and long messages.
Use notifications to present information that needs to be viewed immediately and that requires user attention.
Present clear, concise messages and give follow up actions to allow the user to become more informed or resolve the issue.
Avoid displaying messages with technical error codes that do not help the user solve the problem.
Present specific messages to each situation instead of using standard messages.
Take the blame when it's appropriate. Say "we're having trouble connecting" rather than "you're having connection issues".

Alert types

Information	Blue color. The default notification is usually used to give information that doesn't require too much attention or action. They are typically not in response to a user action. (E.g.: "Logged in as João da Silva. Logout.")
Danger	Red color. Shows to the user that some process or task cannot be completed. Error messages should be clear and objective, avoiding presenting technical error codes. Whenever possible should present a solution or link indicating the next step. (E.g.: "The last item could not be added. Please refresh the page.")
Warning	Orange color. They are usually in anticipation of a significant change. Clearly communicate what will happen if the user proceed with the action and provide an alternative where possible. (E.g.: "Your license is about to expire. Please renew your license by August 5, 2019.")
Success	Green color. Provides a positive response to user actions. (E.g.: "Professional added successfully.")

Examples

Information message

Success message

Alert message

Error message

import { Alert, VFlow } from '@lemonade/ui'
import React from 'react'

function AlertDefault() {
  return (
    <VFlow>
      <Alert type='info' onCloseClick={console.log}>
        Information message
      </Alert>
      <Alert type='success' onCloseClick={console.log}>
        Success message
      </Alert>
      <Alert type='warning' onCloseClick={console.log}>
        Alert message
      </Alert>
      <Alert type='danger' onCloseClick={console.log}>
        Error message
      </Alert>
    </VFlow>
  )
}

export default AlertDefault