Components

Buttons

Buttons Constraints

Buttons are defined with padding: Normal Buttons: 7px 10px and Small Buttons: 2px 8px.

Default Button

To call attention to an action, or highlight the strongest call to action on a page.

Ghost Button

Used regulary on secondary actions.

Alert Button

The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.

Icon Button

Loading Button

Small text Button

Avatars

The User should have rounded square avatars and always 3px rounded corners.

User avatar

Sizes

Form elements

Use forms to allow people to enter data for use by the application, or to configure options. Forms are used to get information and guide people with minimal fuss.

General Constraints

Basic

Label

Standard label alignment is left-aligned with the field underneath. For the placeholder text, use sentence case and left-align.

Icon

Standartd icon aligment is left-aligned, helps users to contextualizes what action he is doing.

Use dropdown menus to let users select an action or options from a set of choices.

Checkboxes & Radios

Checkboxes

Use checkboxes to allow people to select a number of options. This includes no options, a single option or multiple.

Radio Buttons

Use radio groups when you want the person to select a single option from a short list. For example, choosing a day of the week.

Toggles

Turn an option on or off instantly. Toggles are a quick way to view and switch between enabled or disabled states.

Popovers

There are many different components that can be used to give users the ability to select options.

General Constraints

Notifications

Use messages to communicate conditions, indicate an event, or to show responses to user actions. These event-driven messages appear by overlaying content at the bottom left of the screen, emerging from the navigation sidebar.

Success messages

Success messages let the user know that they have completed an action. For these messages, it's best to reaffirm the outcome and get out of the user's way.

Confirmation messages

This type of message alerts the user that the app needs confirmation to proceed with the previously requested action.

Sidebar

The Sidebar allows user to easily jumps between the main section inside the app.

Main sidebar

Secondary sidebar opened

Icon behavior

Cell behavior

Headers

The page header is a pattern that helps define the uppermost part a webpage or product and it provides the core information that users need when viewing the page. The page header pattern is a template that helps combine other components (headings, actions, and selects) to create a consistent user experience.