components
Button
Buttons are used to trigger actions such as submitting a form, beginning a new task, show additional UI. Buttons may contain text or an icon. Both should communicate clearly the action that will be performed. All text buttons should be clear, concise and start with a verb. Use sentence case for text buttons.
Button Sizes
Default size buttons are used in list screens and in the toolbars. Large size buttons are used at the end of the form in the Create or Edit screens, as confirmation in the modals and to prompt creating an item in the list empty state screens. Small buttons are used for specific field in the forms.
Default
Large
Small
Primary Action Button
Primary action buttons are used to indicate the most important action on the screen. There should be only one primary action in a group of buttons. Primary action button must not be used to indicate destructive actions. If an action takes a long time display a loader in the button. In some cases, such as the user remaining on the same screen after clicking the button, display feedback tick to indicate that the action has been completed.
Default
Disabled
Loading
Confirmation
Secondary Action Button/Default Button
Secondary action buttons are used to indicate less important actions on the screen. Could be more than one secondary action in a group of buttons. Secondary action button must not be used to indicate destructive actions. If an action takes a long time display a loader in the button. In some cases, such as the user remaining on the same screen after clicking the button, display feedback tick to indicate that the action has been completed.
Default
Disabled
Loading
Confirmation
Destructive Action Button/Delete Button
Used only for destructive actions such as delete, remove, purge, etc. Such button is usually displayed in a group with a "Cancel" button. There should be only one destructive action button in a group of buttons.
Default
Disabled
Icon Button
Icon buttons are displayed in groups with other buttons. They are used to save space in the layout and the toolbars and to ease the cognitive load for the user when there are many actions available. On click they usually reveal hidden panels or menus. Thus, they have a selected state that is toggled. Place icon buttons at the end of a button group. Use only the default style for icon buttons, never the primary action or the destructive action style. Icons should be unambiguous and their meaning easily recognizable. On hover display browser tooltip describing the action.
Default
Disabled
Loading
Circle Icon Button
Circle icon buttons are used primarily in the Create, Edit and Modal screens. They are part of a form field functionality such as Related data fields or independent in cases such as the Close button. On hover display browser tooltip describing the action.
Default
Disabled
Circle Icon Button Sizes
Default
Small
Circle Icon Button Usage Examples
Add
Edit/Change
Confirm
Date
Time