# Contained button

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

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAb-mEVEubb47MPwOK4%2FContained%20button%20example.png?alt=media\&token=e48c71d7-1274-422f-9c17-2e14e6a35439)

#### 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) 

![](https://3802052413-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAR5Yg4q9IkTHuRlbjQ%2F-MA_rOhKqJXQ2-HscM1D%2F-MAb-vjVmb2miG2rz6sE%2FContained%20button%20states.png?alt=media\&token=894f7252-46f4-49af-93fb-c604c8eff6d7)