Buttons express what action will occur when the user clicks it, touches it, or on a keypress. Buttons can have an icon and user color to indicate urgency or destructiveness.
Example
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| isSubmit | bool | - | false | Make the button act as a submit button |
| isDisabled | bool | - | false | Prevent users from interacting with the button |
| width | oneOf 'default' | 'full' | - | 'default' | Various height and width options |
| isLink | bool | - | false | Changes the button to a div for insertion within a Link component |
| onBlur | func | - | () => {} | Function that fires when the button loses focus |
| onClick | func | - | () => {} | Function that fires when the button is clicked on |
| onMouseDown | func | - | () => {} | Function that fires when the button is mouse downed |
| ariaLabel | string | - | - | Describes buttons that have an icon but no text |
| children | node | yes | - | Text within the button |
| isActive | bool | - | - | Render button with active state |
| size | oneOf 'tiny' | 'small' | 'large' | 'narrow' | 'tight' | - | - | Various height and width options |
| style | oneOf 'highlight' | 'danger' | 'danger-outline' | 'outline' | 'outline-reverse' | 'plain' | 'toggle' | 'underline' | 'unstyled' | - | - | Various color options |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Types of Buttons
Momentary / Push Button
These are the most uses type of button, and what most people think of when using a Button in any user interfaces. When a user clicks the button, it momentarily depresses, and when the button is released an action takes place as the button returns to its default, unpressed state.
Button Styles
Primary Highlight
The Primary Highlight button style is used when you want to clearly indicate the non-dangerous next step of a flow, or a primary action on a page. There should not be more than one of these buttons visible at any time, as there cannot be more than one primary action. Consider using the Secondary Highlight style if there is more than one next step
Primary Danger
The Primary Danger button style is uses when you want to clearly indicate the next step of a flow or action that may cause data loss, or is otherwise dangerous to click.
What is a “Dangerous Action”?
Dangerous actions are actions the user may want to take that cannot be undone, or otherwise may cause dataloss. Imagine a user that’s spent a long time working on a set of data. The delete button should be dangerous here because that data would be lost, and that time wasted. Danger may also be an action that has unintended consequences. Such as an experience being archived may cause some visitors who have been seeing a particular experience to not see it any more.Secondary Highlight
The secondary highlight button style should be used when there is already a primary action, but the user may also take a secondary non-dangerous action. Imagine a case where there is a primary “Publish” button for the campaign, but also each variation has it’s own “Edit” button. The “Edit” buttons should not be primary, because there is already a primary action visible. Instead, consider using secondary buttons for these non-dangerous actions.
Secondary Danger
The secondary danger button style is used when there are two dangerous actions visible on the page, and one of them is primary.
Imagine a case where there are two actions presented to the user. One action is “Remove from Account” and the other is “Remove from Project”. The “Remove from Account” button is the primary because it’s the most common action, and it’s dangerous because to undo this action the user will have to re-request access to the project. Since there cannot be more than one primary action, the “Remove from Project” button should be the secondary action.
Default
This the default style of OUI buttons. This style should be used when there is already a primary style visible on the page, and there is no clear secondary action. This style can also be used when there are many buttons visible to the user at once, for instance when there is a column of buttons in a table.
Subtle
This style should be used on a button where there is a primary action visible to the user, and the desired action should be “quietly” presented. Imagine a case where in a modal dialog you have a “Save” button that is of the primary highlight style, and a “Cancel” button next to it that should be subtlety presented. This style of button can emphasize it’s surrounding actions.
Toolbar
Generally when buttons are used in toolbars, they have no border or text color.
Underline
Used for a mad-lib style of dropdown choices where too reduce disrupting the reading experience.
Icon Buttons
Sometimes buttons can have an icon only, presented to the user without text. These buttons are most commonly used in tables for adding “+” and removing “✕” table rows. Buttons without text may also be used in code samples where the word “Copy” may impact the code presented when the user tries to copy and paste the code sample manually.
Using Icons and Text
You should consider not using icons with text in a button. Generally the only icon that is appropriate in a button is the right aligned chevron that is required with dropdown buttons.
Action Icons
Given a table of many items, the user may want to take one of several actions on any one of the given items. Avoid the naive approach of adding each action as a button in each of the rows, instead consider using an “action menu”. This tucks away common actions and avoids visual clutter. Usually an action menu is paired with some primary/secondary action button that is always visible to the user. This primary action also may come in the form of a link. The experiments dashboard is a good example of this in practice.
Sizes
Generally, buttons should only be as wide as their text contents. In some cases, button can be presented wider to fill the width of their container. This is appropriate in cases such as a button in a sidebar, or the dropdown button that allows for selecting a page in the visual editor.
Small Buttons
Small buttons are generally used in lists where there are many items in dense tables.
Tiny Buttons
Tiny buttons are the smallest size button available in OUI. These buttons are used in places where the size of the button must be the size of the line height of the text. For example, in the filter picker for tokens, the “View” button is a tiny secondary highlight button.