- Data Blocks
- Data Tables
- Filter Box
- Input Group
- List Group
- Modal and Dialog
- Page Header
- Progress Bar
- Steps New
- Utility Classes
Priority and Use
Buttons has different priorities that can be combined with
depending of its use.
buttonhas 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
Use the button classes for
As best practices it is advisable to use the
Active or disabled
To show a button or link appearing to be clicked, just use
And to make buttons that look like they can not be clicked, use
disabled attribute or class.
.slim to have a smaller version.
.loading to show a loading spinner.
Wrap a group of buttons with
tangram buttons class.
.buttons make all children buttons smaller.
Combine sets of button groups into button toolbars for more complex components.
Create block level button, those that span the full width of a parent, by adding
Button with dropdown
Turn buttons into dropdowns with some class adjustments and additions.
dropdown-toggle class on the button.
To leave it open, in the element with
.buttons include the class
Button with separated dropdown
It's possible to split the action of the main button with the dropdown action.
.buttons within another
.buttons when you want dropdown menus mixed with a series of buttons.
Button with icon
Te list of available icons can be found here.
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.
It is used to indicate the main action (call-to-action). There can only be one primary button on each page.
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.
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.
It is used as an option to cancel one or more actions. It should always be used in conjunction with action buttons.
It is used to close a message. It is associated with Modal and Dialog components.
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.
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.
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.
All buttons has a disabled state, avoiding click or tap.
All buttons has an active state.
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.
It is Button default size. The application has the same rules for desktop and mobile.
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.