Buttons make common actions immediately visible and easy to perform with one click or tap. They can be used for any type of action, including navigation.
Examples
Basic Notice
A basic button is one that is a flat colour and has no background colour by default.
Success Notice
A primary button is used for primary and important actions, such as saving a page or submitting a form.
Info Notice
A secondary button is the next level of hierarchy and are used for actions that are important but not the most important, such as a back button for a form or survey.
Aside Notice
A tertiary button is the lowest level of hierarchy for actions and is reserved for those that carry the least importance, such as cancelling a form.
Warn Notice
A tertiary button is the lowest level of hierarchy for actions and is reserved for those that carry the least importance, such as cancelling a form.
Error Notice
A full button is a button that spans the complete width of it's parent container.
Documentation
Main Elements
| Selector | Description |
|---|---|
| .bocss-notice | Selector for basic a button without modification |
| .bocss-notice__icon | Selector for basic a button without modification |
| .bocss-button__content | Selector for basic a button without modification |
Modifiers
| Selector | Modifies | Description |
|---|---|---|
| .bocss-notice--success | .bocss-notice | Selector for basic a button without modification |
| .bocss-notice--info | .bocss-notice | Selector for basic a button without modification |
| .bocss-notice--aside | .bocss-notice | Selector for basic a button without modification |
| .bocss-notice--warn | .bocss-notice | Selector for basic a button without modification |
| .bocss-notice--error | .bocss-notice | Selector for basic a button without modification |
Best Practices
Notices should:
- Be clearly and accurately labeled.
- Lead with strong, actionable verbs.
- Use established button colors appropriately. For example, only use a red
button for an action that’s difficult or impossible to undo. - Prioritize the most important actions. Too many calls to action can cause
confusion and make merchants unsure of what to do next. - Be positioned in consistent locations in the interface.
Content Guidelines
Do:
- Be clearly and accurately labeled.
- Lead with strong, actionable verbs.
- Use established button colors appropriately. For example, only use a red
button for an action that’s difficult or impossible to undo. - Prioritize the most important actions. Too many calls to action can cause
confusion and make merchants unsure of what to do next. - Be positioned in consistent locations in the interface.
Do Not:
- Be clearly and accurately labeled.
- Lead with strong, actionable verbs.
- Use established button colors appropriately. For example, only use a red
button for an action that’s difficult or impossible to undo. - Prioritize the most important actions. Too many calls to action can cause
confusion and make merchants unsure of what to do next. - Be positioned in consistent locations in the interface.
Usage
Notices can be found on pages such as: