Components
Last updated
Last updated
Buttons are defined with padding: Normal Buttons: 7px 10px and Small Buttons: 2px 8px.
To call attention to an action, or highlight the strongest call to action on a page.
Used regulary on secondary actions.
The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.
The User should have rounded square avatars and always 3px rounded corners.
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.
Standard label alignment is left-aligned with the field underneath. For the placeholder text, use sentence case and left-align.
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.
Use checkboxes to allow people to select a number of options. This includes no options, a single option or multiple.
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.
Turn an option on or off instantly. Toggles are a quick way to view and switch between enabled or disabled states.
There are many different components that can be used to give users the ability to select options.
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 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.
This type of message alerts the user that the app needs confirmation to proceed with the previously requested action.
The Sidebar allows user to easily jumps between the main section inside the app.
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.
