2023-05-26 15:58:06 +02:00
|
|
|
|
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
import * as stories from "./button.stories";
|
|
|
|
|
|
|
|
|
|
<Meta of={stories} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
# Button
|
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
|
|
|
|
|
used to indicate actions that can be performed by a user such as submitting a form.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Primary />
|
|
|
|
|
|
|
|
|
|
<Controls />
|
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
## Guidelines
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
### Choosing the `<a>` or `<button>`
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button
|
|
|
|
|
takes:
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
- If navigating to a new page, use `<a>`
|
|
|
|
|
- If taking an action on the current page use `<button>`
|
|
|
|
|
- If the button launches a dialog, use `<button>`
|
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
### Groups
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Groups of buttons should be seperated by a `0.5` rem gap. Usually acomplished by using the
|
|
|
|
|
`tw-gap-2` class in the button group container.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Groups within page content, dialog footers or forms should have the `primary` call to action placed
|
|
|
|
|
to left. Groups in headers and navigational areas should have the `primary` call to action on the
|
|
|
|
|
right.
|
|
|
|
|
|
|
|
|
|
## Accessibility
|
|
|
|
|
|
|
|
|
|
Please follow these guidelines to ensure that buttons are accessible to all users.
|
|
|
|
|
|
|
|
|
|
### Color contrast
|
|
|
|
|
|
|
|
|
|
All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To
|
|
|
|
|
use a button on a different background, double check that the color contrast is sufficient in both
|
|
|
|
|
the light and dark themes.
|
|
|
|
|
|
|
|
|
|
### Loading Buttons
|
|
|
|
|
|
|
|
|
|
Include an `aria-label` attribute that defaults to “loading” but can be configurable per
|
|
|
|
|
implementation. On click, the screen reader should announce the `aria-label`. Once the action is
|
|
|
|
|
compelted, use another messaging pattern to alert the user that the action is complete (example:
|
|
|
|
|
success toast).
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
### Submit and async actions
|
|
|
|
|
|
|
|
|
|
Both submit and async action buttons use a loading button state while an action is taken. If your
|
|
|
|
|
button is preforming a long running task in the background like a server API call, be sure to review
|
|
|
|
|
the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
|
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Loading} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
## Styles
|
|
|
|
|
|
|
|
|
|
There are 3 main styles for the button: Primary, Secondary, and Danger.
|
|
|
|
|
|
|
|
|
|
### Primary
|
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Primary} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
|
|
|
|
|
to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
### Secondary
|
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Secondary} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
The secondary styling should be used for secondary calls to action. An action is "secondary" if it
|
|
|
|
|
relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
|
|
|
|
|
other; however, generally there should only be 1 or 2 calls to action per page.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
### Danger
|
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Danger} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
Use the danger styling only in settings when the user may preform a permanent action.
|
|
|
|
|
|
|
|
|
|
## Disabled UI
|
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Both the disabled and loading states use the default state’s color with a 60% opacity or
|
|
|
|
|
`tw-opacity-60`.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Disabled} />
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
|
|
|
|
## Block
|
|
|
|
|
|
2023-05-08 14:46:59 +02:00
|
|
|
|
Typically button widths expand with their text. In some causes though buttons may need to be block
|
|
|
|
|
where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
|
2022-10-18 16:54:27 +02:00
|
|
|
|
|
2023-05-26 15:58:06 +02:00
|
|
|
|
<Story of={stories.Block} />
|