UI Pattern and Guidelines
  • User interface pattern guidelines
  • Foundations
    • Accessibility
    • States
    • Colours
    • Typography
    • Grid and layout
    • Icons
    • Data Visualisation
  • Components
    • Avatar
    • Badge
    • Breadcrumb
    • Button group / Select button
    • Button
    • Card
    • Checkbox
    • Contained button
    • Container
    • Counter
    • Divider
    • Empty state
    • Error page
    • Form Fields
    • Footer
    • Icons
    • Legal
    • Link
    • Lists
    • Loader
    • Modal
    • Navigation
    • Notification
    • Pagination
    • Popover
    • Progress bar
    • Radio button
    • Scroll bar
    • Slider
    • Status
    • Switch
    • Table
    • Tabs
    • Tag
    • Titles
    • Tooltip
    • Uploader
Powered by GitBook
On this page

Was this helpful?

  1. Components

Contained button

PreviousCheckboxNextContainer

Last updated 4 years ago

Was this helpful?

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)