UX/UI guidelines

Table of Contents

• General page template
• Data grid
• Dialog
• Icons
• Required fields
• Tooltip

General page template

Data grid

Dialog

💡 Use the Dialog component instead of a modal. The modal is the low-level element meant to block the interaction. The Dialog is based on a modal, but specializes in providing information and further actions.

A Dialog is composed of three main parts:

• Title. Contain a brief, clear statement or question. It should communicate the Dialog’s purpose.

  Background color is secondary.

• Content. Anything needed for the context, from supporting text to full-size form.

  With long content, use the scroll=paper.

• Actions. There’s always a way to go back (Cancel). And the main action is on the right. The label should reflect the action performed when clicked.

  If any required field is in the content, the action button is disabled until they are completed.

  Cancel. Text button, primary color.

  Action. Contained button, primary color.

Responsiveness is configured as follow:

> 🚧 TBD (full-width + variable maxWidth depending on breakpoints?).

Icons

Material Icons should be in the Outlined style by default.

Required fields

When information is required to proceed:

• Required field(s) should show an asterisk * after the label.

• Above required field(s), explain what the asterisk does. This message is displayed once, after any title and before required field(s).

  Add * Required fields., with the typography style subtitle2.

• The action button below the field(s) is enabled only when all required fields are completed.

Tooltip