Headers

Headers are compositions that extend standard navbar functionalities. They contain additional components like sub-navbar, or image covers which serve as a containers for extra navigation elements - usually links, forms, or call-to-action buttons.

Navigation bar

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

The width of the dropdown menu should be according to the size of the menu item. And the required tabbing should have Padding Top and Bottom as 0.5rem or 8px and the Padding Right and Left as 1rem or 16px which ever is applicable.

Text fields

Text fields let users enter and edit text. Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.

Types

Text fields come in two types:

• Filled text fields
• Outlined text fields

Both types of text fields use a container to provide a clear affordance for interaction, making the fields discoverable in layouts.

Both types of text fields provide the same functionality, so the type of text field you use can depend on style alone.

Anatomy - Filled text field

Anatomy - Outlined text fields

Buttons

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

Usage

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

• Dialogs
• Modal Windows
• Forms
• Cards
• Toolbars

When to use?

Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

When not to use?

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page.

Types of button

• Contained button (High emphasis)
• Outlined button (Medium emphasis)
• Text button (Low emphasis)
• Toggle button

Outlined button

Outlined buttons are medium-emphasis button. These are used for more emphasis than text buttons due to the stroke. For less prominent, and sometimes independent, actions. Outlined buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Outlined buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present.

The outline button style removes all background images or colors from a button and gives it a lighter look.

The outline style buttons can be used for various purposes, for example:

• Indicating the secondary action complementing the primary action.
• If you have many buttons then it may help in reducing the “noise”

Text button

Text buttons are typically used for less important actions. This tpe of buttons should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

Text buttons or links should never be used to change the state of an application. This means that clicking on a link should not add, change, or delete any data on the screen, So, a delete action should never be a link, nor should a save action.

Text buttons hurt mobile usability

The usability standards for buttons are higher for mobile apps than desktop apps. With a smaller screen and finger navigation, mobile buttons must be easy to tap, read, and recognize. Most solid buttons meet this standard, but text buttons rarely do. Before you use text buttons on your app, here’s what you should know.

A finger is larger than a mouse cursor. Placing it over a smaller target feels awkward for users. Their finger covers the button’s text with no visual cue to confirm if the action registered.

Anatomy

Radio buttons

Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.

Usage

Use radio buttons to:

• Select a single option from a list
• Expose all available options

When to use radio buttons?

Radio buttons should be used instead of checkboxes if only one item can be selected from a list.

Checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. A stand-alone checkbox, or a toggle can be used for a single option that the user can turn on or off.

Usage

Use checkboxes to:

• Select one or more options from a list
• Present a list containing sub-selections
• Turn an item on or off in a desktop environment

When to use checkboxes

Checkboxes should be used instead of switches if multiple options can be selected from a list.

Switches

Switches toggle the state of a single item on or off.

Usage

Switches are the preferred way to adjust settings on mobile.

Use switches to:

• Toggle a single item on or off, on mobile and tablet
• Immediately activate or deactivate something

When to use switches

Switches should be used instead of radio buttons if each item in a set can be independently controlled. List of phone settings. Each item has a radio button.