mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Add dialogs guidelines (#13526)
* Add dialogs guidelines * Updated the Buttons and X-icon text
This commit is contained in:
parent
3fc94106b8
commit
93debac19a
32
gallery/src/pages/components/dialogs.markdown
Normal file
32
gallery/src/pages/components/dialogs.markdown
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
---
|
||||||
|
title: Dialgos
|
||||||
|
subtitle: Dialogs provide important prompts in a user flow.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Material Desing 3
|
||||||
|
|
||||||
|
Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview).
|
||||||
|
|
||||||
|
# Highlighted guidelines
|
||||||
|
|
||||||
|
## Content
|
||||||
|
* A best practice is to always use a title, even if it is optional by Material guidelines.
|
||||||
|
* People mainly read the title and a button. Put the most important information in those two.
|
||||||
|
* Try to avoid user generated content in the title, this could make the title unreadable long.
|
||||||
|
* If users become unsure, they read the description. Make sure this explains what will happen.
|
||||||
|
* Strive for minimalism.
|
||||||
|
|
||||||
|
## Buttons and X-icon
|
||||||
|
* Keep the labels short, for example `Save`, `Delete`, `Enable`.
|
||||||
|
* Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
|
||||||
|
* Destructive actions should be a red warning button.
|
||||||
|
* Alert or confirmation dialogs only have buttons and no X-icon.
|
||||||
|
* Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
|
||||||
|
|
||||||
|
## Example
|
||||||
|
### Confirmation dialog
|
||||||
|
> **Delete dashboard?**
|
||||||
|
>
|
||||||
|
> Dashboard [dashboard name] will be permanently deleted from Home Assistant.
|
||||||
|
>
|
||||||
|
> Cancel / Delete
|
Loading…
x
Reference in New Issue
Block a user