Styles and States
Semantic Styles
UI elements can appear in different visual styles to give them further meaning, like displaying a text input that failed validation in "error style".
Error Style
Tells the user about an error in the process, or indicates bad outcome.
Examples:
- Error feedback messages.
- Input elements that failed validation, and the user cannot proceed until they pass validation.
- Indicating an undesirable outcome, e.g. negative trend in a chart.
- Exception: destructive actions appear in error style instead of warning style, e.g. Delete button in confirmation dialog.
Warning Style
Warns the user about the possibility of an unintended or undesirable outcome.
Examples:
- Messages that tell the user about a risk in continuing a process.
- Input elements that failed validation, but the user can still proceed.
Success Style
Tells the user that a process was completed without errors, or indicates good outcomes.
Examples:
- Feedback message that tells the user that a process was completed without errors.
- Input elements that passed validation, e.g. password verification match.
- Indicating a desirable outcome, e.g. positive trend in a chart.
Highlight Style
Visually emphasize elements to draw the users eyes towards them.
Examples:
- Messages containing important information, such as a description of a functionality, that the user should read first.
- Highlighted action, e.g. Submit, Next, or Save buttons.
States
Hover and Active State
While the user's cursor is above an element, it enters the hover state. While the element is being clicked on, it enters the active state.
To communicate to the user that an element can be interacted with by clicking, we change the element's appearance and the user's cursor when the element is in hover state. This also lets users show the whole "clickable area" of the element, which is useful in the case of "borderless" interactive elements like icon-only buttons in toolbars.
Focus State
The focus state indicates that the element is currently focused. This element will receive keyboard events, e.g. hitting the spacebar while a button is focused will activate the button. The element receives focus when the user clicks on it or selects it with the tab key.
Disabled State
When the user is not allowed to interact with an interactive element, that element is put in disabled state.
Elements in disabled state doesn't change visually on hover or on click, but we do change the cursor on hover to not-allowed.
Disabled tooltip: When an interactive element (like a button, text input, or tab) is in disabled state, we recommend adding a tooltip that explains to the user why the element is not available.
Read-only state: inputs with the readonly attribute are focusable, selectable, and they are submitted as part of the form, but their values cannot be changed. Inputs with the disabled attribute are not focusable and they're usually not part of form submissions.