Components
Buttons
Priority and Use
Buttons has different priorities that can be combined with .danger
depending of its use.
Element tag
button
has the attribute type="submit"
.
If you are using a button inside a form and don't want to submit the form when button is clicked, you can simply use type="button"
.
Use the button classes for a
, button
or input
elements.
As best practices it is advisable to use the button
element.
Link
Active or disabled
To show a button or link appearing to be clicked, just use .active
.
And to make buttons that look like they can not be clicked, use disabled
attribute or class.
Button sizes
Add .slim
to have a smaller version.
Loading status
Add .loading
to show a loading spinner.
Button group
Wrap a group of buttons with tangram buttons
class.
Using .slim
with .buttons
make all children buttons smaller.
Button toolbar
Combine sets of button groups into button toolbars for more complex components.
Fluid buttons
Create block level button, those that span the full width of a parent, by adding .fluid
.
Button with dropdown
Turn buttons into dropdowns with some class adjustments and additions.
Add the dropdown-toggle
class on the button.
To leave it open, in the element with .buttons
include the class .open
.
Button with separated dropdown
It's possible to split the action of the main button with the dropdown action.
Nesting
Place a .buttons
within another .buttons
when you want dropdown menus mixed with a series of buttons.
Concept
A button enables the user to make an action with a click or tap.
In interfaces with many actions, like lists and editors, consider grouping the options into dropdowns or applying progressive disclosure.
Types
Primary (contained)
It is used to indicate the main action (call-to-action). There can only be one primary button on each page.
Secondary (outlined)
It is used to indicate general actions. It has an average level of importance, therefore, the number of secondary actions related to the primary action should be considered to avoid the loss of hierarchy.
Tertiary (text)
It is used to indicate general actions of minor importance, which are not primary or secondary. For example, exit a stream, cancel actions and close modals.
Cancel (text)
It is used as an option to cancel one or more actions. It should always be used in conjunction with action buttons.
Close (outlined)
It is used to close a message. It is associated with Modal and Dialog components.
"X" (cancel/close)
It is used to undo an action.
Primary - Delete (contained)
It is used when the main action aims to destroy any kind of data. It should always be used in conjunction with cancel button.
Secondary - Discard (outlined)
It is used to confirm changes (generally data loss). You should always have an action button as a primary option to allow preserving data.
Uses
Default (blue)
It is the default style, used for any action that is not destructive (use Danger in this case). Is can has variations according to the case of use. For example, if it is primary, it will have the background filled; if it is secondary, it will have outline style.
Danger (red)
It is used when the button corresponds to a destructive action, such as data loss. A button with Danger style, like the Default, will have its variations according to it's intent. For example, if it is primary, it will have the background filled; if it is secondary, it will have outline style.
Status
Disabled (true/false)
All buttons has a disabled state, avoiding click or tap.
Active (true/false)
All buttons has an active state.
Copy
Button content must have at least two terms:
- For single action: infinitive verb + target / action item. Example: Save Email; Create Landing Page.
- For double action: two infinitive verbs. Example: Save and exit; Save and continue.
For undo-related interactions, only use the infinitive verb. Example: Cancel; Close.
Sizes
Regular
It is Button default size. The application has the same rules for desktop and mobile.
Slim
It is used on tables and lists with lots of information, where they appear repeatedly.
When to use Button
Buttons should be used whenever the user needs to perform an action, whether primary, secondary or tertiary.
When not to use Button
Cases:
Whenever the action is related to navigation, for example, in menus or leading to websites external links. In this case use: Link
Whenever the action is related to providing information or help. In this case use: Helper trigger