In this section, we will present the different components that have been created based on Google Material guidelines. They have been adapted to work specifically with the measurements and requirements of the Valina terminal.
Buttons allow users to take actions and make choices with a single tap. They are usually placed in dialogs, modal windows, forms, cards, toolbars and more.
- Flat buttons (squared and circular). They are used for less important actions.
- Contained buttons (squared and circular). They present higher emphasis and are used for more relevant actions.
- Outlined buttons. They are typically used for intermediate actions or tasks.
- Icon action buttons. They combine text and icons.
Flat, contained and outlined buttons can be placed over a variety of backgrounds, as they present different containers to mantain accessibility.
Buttons – dropdown
Dropdown buttons display a list of choices on temporary surfaces.
- Closed with background. Dropdown appears as a single box that contains information and an arrow.
- Open. When tapping on the arrow, a list of options will appear on the user’s screen.
- Selected. When tapping on the desired option, the selected box will be displayed in a different shade.
- Closed. They are typically used when a dropdown contains different choices, after the user has selected one of them.
Bottom sheets action
Bottom sheets are surfaces containing supplementary content that are anchored to the bottom of the screen.
- Modal bottom sheet. They are frequently used as alternatives to menus or simple dialogs.
- List style bottom sheets can contain icons and a header and be presented as a menu of apps.
- Collapsed bottom sheet. They are persistent and present in-app content. They can be used to display supplementary content as well as media controls.
They can be displayed on an expanded list style as well as on a contained style, with or without details and/or icons.
Bottom sheets action I
Bottom sheets action II
Cards contain content such as text, photos or links and actions about a single subject. Cards are on optimal way of displaying content that has different elements on it.
Cards have active layers and can be displayed singularly or as a group, forming a gallery or collection of cards. A card can be composed of title, subtitle, images of different sizes, icons and text of any kind of length. They can also come accompanied of buttons that lead to actions as well as dropdowns or expasion panels.
Cards IV – Shopping cards view
Shopping cards contain information about the products that have been added to the shopping cart.
Cards V – Shopping cart
Shopping cart contains information about the products and the quantity of each product to be added to the shopping cart.
Dialogs are used to inform users about specific tasks and may contain critical information, require decisions, or involve more than one task. As they are interruptive, dialogs should be used less often than other components.
- Alerts. They are interruptions that inform about a situation and require acknowledgement.
- Simple dialogs. They can provide details or actions about a list item, frequently accompanied of action buttons. They can be presented with text, lists or scroll lists.
- Confirmation dialogs. They require users to explicitly confirm a choice in order to lead to an action.
Expansion panels contain creation flows and allow lightweight editing of an element. Information about this component is displayed on the prior Buttons – dropdown section.
Feedback consists of a list of icons to express satisfaction with the purchasing process.
When one of the icons is selected, it transforms into a check.
Selection controls allow the user to select options.
- Checkbox. They are presented as squares and usually allow the user to select multiple options.
- Radio button. They present a rounded shape, and are frequently used when the user must select just one option.
- Switch. They allow a selection to be turned on (activated) or off (deactivated).
They have five different states, both for when on and off.
Steppers convey progress through numbered steps. They break up a sequence into multiple screens so the user can complete an action step by step.
There are different ways to apply a stepper on Valina:
- Using navigation buttons on the bottom of the screen or indicating the step and/or page using navigation bullets.
- Using navigation arrows on the top of the screen accompanied with a title and step number.
You can choose between using navigation bullets or step numbers to let the user know in which page/step they are on.