IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

@grafana/ui: Buttons documentation (#23144)

Browse Source 
* Add info: when to use which and how to mix buttons

* Update description for Button.mdx

- add note about scenario without primary action
- add note about secondary button being the default

* Refine docs info for secondary and destructive

Co-authored-by: Tobias Skarhed <tobias.skarhed@gmail.com>
This commit is contained in:
Jess 2020-05-14 11:39:34 +02:00 committed by GitHub
parent e323f7be51
commit 54a90166a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/Button/Button.mdx
View File

@ -7,7 +7,9 @@ import { Button } from './Button';
## Primary
Used for "call to action".
Used for "call to action", i.e. triggering the main action. There should never be more than one on a page. If you need multiple buttons for different actions, decide which action is the most important and make that the primary `Button`. All other `Button` components should be secondary.
If there is no primary action, all `Button` components should be secondary.
<Preview>
<div>
@ -25,7 +27,10 @@ Used for "call to action".
## Secondary
The secondary button, used for "cancel" or aborting.
The secondary `Button` is the default button style and can trigger various actions. How it is used depends on its surroundings:
1. When next to the primary `Button`, the Secondary style can for example be used for "Cancel" or "Abort" actions.
2. When there is no main important action on a given page, all `Button` components should use the secondary style.
<Preview>
<div>
@ -43,7 +48,7 @@ The secondary button, used for "cancel" or aborting.
## Destructive
Used for removing or deleting entities.
Used for triggering a removing or deleting action. Because of its dominant coloring, it should be used sparingly. If you need multiple Destructive `Button` components in one view, we recommend using a secondary `Button` or Link variant instead and only use the Destructive variant to double confirm.
<Preview>
<div>