Notifications
Also known as alerts, notifications are used for confirmations and acknowledgments that require minimal user interaction. They are very useful when making decisions where the user could not be sure, for example delete something.

Check out more about notifications in Messages.
Each notification is generated by calling the bukealaNotify function with the following options: icon, title, message, delay, action1 and action2. The onclick option carries the function that executes the button and the name option the text that appears above the button.
The closeOnClick option must be set to true for the button click event to dismiss the notification.
$.bukealaNotify({
    icon: 'save-icon',
    title: 'Are you sure to exit before save?',
    message: 'This message provides a question before you take action about something that later you are going to do.',
    delay: 0,
    action1: { onclick: "", name: 'Save', closeOnClick: false},
    action2: { onclick: "", name: 'Cancel', closeOnClick: true},
});
$.bukealaNotify({
    icon: 'delete-icon',
    title: 'Are you sure you want to delete this?',
    message: 'This message provides a question before you take action about something that later you won't be able to undo.',
    delay: 0,
    action1: {onclick: "", name: 'Delete', closeOnClick: false},
    action2: {onclick: "", name: 'Cancel', closeOnClick: true},
});
Toast
There is a type of notifications called toast, this component is a non-disruptive message that appears at the top of the interface to provide quick feedback on the result of an action.

A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.
Success
Success messages let people know they have completed an action. For these messages, it's best to confirm the outcome and let people continue. If they have just created something, give them an option to view it. 
$.bukealaNotify({
    icon: 'success-icon',
    title: 'Success message.',
    delay: 0
});
$.bukealaNotify({
    icon: 'success-icon',
    title: 'Success message.',
    message: 'This message appears as a successful message for the action you did.',
    delay: 0
});
Information
Information messages alert the user to additional information without requiring an action. Inform the user about something that might help or impact them. Then, let them get back to work. Info messages are also used for loading states. 
$.bukealaNotify({
    icon: 'info-icon',
    title: 'Info message.',
    delay: 0
});
$.bukealaNotify({
    icon: 'info-icon',
    title: 'Info message.',
    message: 'This message provides information about what you need to do or indicates something you need to know about.',
    delay: 0
});
Warning
Warning messages appear before we request the user to take action. This is usually in anticipation of a significant change. Have empathy for the user. Inform, but don't alarm. If the warning comes before an action, clearly communicate what will happen if they proceed, and provide an alternative where possible. 
$.bukealaNotify({
    icon: 'warning-icon',
    title: 'Warning message.',
    message: '',
    delay: 0
});
$.bukealaNotify({
    icon: 'warning-icon',
    title: 'Warning message.',
    message: 'This is a warning message toast. Provides information about something you are going to do or change.',
    delay: 0
});
Error
Error messages let the user know that something has gone wrong after they've tried to do something or if there are connectivity issues. Explain the problem and provide the user with a next step or an alternative. Keep the message simple and direct, and avoid confusing the user with technical details. 
$.bukealaNotify({
    icon: 'error-icon',
    title: 'Error message.',
    delay: 0
})
$.bukealaNotify({
    icon: 'error-icon',
    title: 'Error message.',
    message: 'An error message toast provides users know that something has gone wrong after they\'ve tried to do something.',
    delay: 0
});
Content guidelines
  • The icon and its color must reinforce the intention of the message (information, warning, error, success)

  • They are displayed at the top right of the screen.

  • Buttons should be aligned to the right.

  • The title and description must be short, clear and concise.
1
Icon: Reinforces the intention of the message.
2
Title: Provides a quick general description of the alert.
3
Description: Provides additional details and practical steps for the user to take.
4
Secondary Button: Shows the least relevant action.
5
Primary Button: Displays the primary action.
Content guidelines: Toast
  • Messages should be clear and concise.

  • The title must have between 3 and 5 words.

  • Do not exceed 60 characters in the description.
Behavior
  • They slide in and out, usually at the top right of the page.

  • The toast disappears after five seconds, but can also be discarded by the user.

  • Multiple toast are stacked vertically and the most recent appears at the top of the list.
1
Icon: Informs users the type of notification at a glance.
2
Title: Provides a quick overview of the notification.
3
Message: Can be optional. Provides additional details and actionable steps for the user to take.
States
Success:
Use to confirm that a user instruction was processed successfully.
Information:
Use to guide a user's attention to relevant details, but they should stay focused and related to the topic on the screen.
Warning:
Use warning alerts when users need to be informed about a potentially unfavorable situation that requires eventual action on their part. If the problem requires immediate attention, use a critical alert.
Error:
Use critical alerts when something is preventing users from continuing or when an issue needs to be resolved immediately. The alert should offer a solution to the problem.
DO
  • When an action is required before continuing.
  • For success messages.
  • Only for non-critical errors that are relevant at the moment and can be explained in 3 words.
DON'T
  • Don't use a toast if the message must remain on the screen.
  • Don't use a toast when you want to include an action.