packages/grafana-ui/src/components/Button/Button.mdx
import { Meta, Canvas, ArgTypes, Unstyled } from '@storybook/addon-docs/blocks'; import { Button, LinkButton } from './Button'; import { Alert } from '../Alert/Alert'; import { Stack } from '../Layout/Stack/Stack'; import { ExampleFrame } from '../../utils/storybook/ExampleFrame';
<Meta title="MDX|Button" component={Button} />Clickable elements that are used to trigger actions. Buttons communicate what action will occur when users interact with it.
When using a button please always follow a11y rules (e.g. W3C Recommendation 3.3.2 Labels or instructions) and make sure the context in which the button is located is also communicated by screen readers.
| Type | Component | Emphasis | Purpose |
|---|---|---|---|
| Primary | <p>Filled with Label</p> <p>Filled with Icon + Label</p> <p>Filled with Label + Icon</p> <p>Filled with Icon + Label + Icon</p> | High | 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. |
| Secondary | <p>Filled</p> <p>Outline</p> <p>Ghost</p> | Default | 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. |
| Size | Width-Height (px - rem) | Font-Size | Font-Weight |
|---|---|---|---|
| Small | Auto - 24px | 12px | 500 |
| Medium | Auto - 32px | 14px | 500 |
| Large | Auto - 48px | 18px | 500 |
Note: Before using buttons without text always consider using IconButton instead.
Primary/Destructive Button -- High Emphasis:
A single page should only display one button with the highest importance for the main action. Other buttons should have lower emphasis and be visually different within the UI. This primary button has to attract the user's attention.
Secondary/Icon Button -- Default Emphasis:
A single screen can show more than one button, the other buttons can be in the same page with a primary button, these buttons have to be less important according to the actions, and do not distract users from the main content page. You should only group calls to action that are related to each other. A higher emphasis button can be paired with multiple buttons which are lower emphasis.
Outline/Text Button -- Low Emphasis:
These buttons have less impact and are less distracting to the user's attention, on the same screen several of them can be used. They are actionable to take users to a new page, the main objective being to provide more information about that section.
<button> or <input type="button"> (iOS "clickable elements" fix for role="button").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.
The secondary Button is the default button style and can trigger various actions. How it is used depends on its surroundings:
Button, the Secondary style can for example be used for "Cancel" or "Abort" actions.Button components should use the secondary style.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.
To add an anchor that looks like a button use the <LinkButton> component and pass a href prop.