Contained button

Contained buttons appear on notifications for users to do an action like read or dismiss.

Behaviour

• Contained buttons should only be used within alert notifications

• These buttons allow users confirm or dismiss something. There are three types of actions for the buttons.

  • Confirming actions are used to resolve what triggered the notification, confirming actions confirm a proposed action. These actions can involve removing something, such as “Delete” or “Remove,” if it suits the context. They are placed on the right side of the alert.

  • Dismissive actions are used to dismiss a proposed action, and return the user to the originating screen or step. They are placed directly to the right of a confirming action.

  • Acknowledgement actions are used when user acknowledgement is required to proceed, a single action may be presented.

Best Practices

• If a single action is provided, it must be an acknowledgement action.

• If two actions are provided, one must be a confirming action, and the other a dismissing action ideally using an X to dismiss the notification

• Hyperlinks will be stay white with a underline help the user identify within a notification

Contained buttons states

• Contained buttons types are: Default/Info/Success and Warning (Yellow background - This to make sure the button is accessible within the background of a warning notification)

• Content padding is 16px, Height is 28px.

• Focus borders: White

• Font: Open sans Regular 12px/16px (Font size / Line height)