-
Notifications
You must be signed in to change notification settings - Fork 195
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items.
- Loading branch information
Showing
4 changed files
with
419 additions
and
156 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
import { Canvas, Meta, Subtitle } from '@storybook/blocks'; | ||
|
||
import * as ButtonStories from './button.stories'; | ||
|
||
<Meta of={ButtonStories} title="Docs" /> | ||
|
||
# Button | ||
|
||
<Subtitle>Buttons allow users to perform an action or to navigate to another page. They have | ||
multiple styles forvarious needs, and are ideal forcalling attention to where a user needs to | ||
do something in order to move forward in a flow.</Subtitle> | ||
|
||
## Variants | ||
|
||
There are four available variants that are used for different levels of emphasis and different | ||
types of actions. By default, a button uses the fill style with a solid background. The primary | ||
and secondary variants also have an outline option. | ||
|
||
### Accent | ||
|
||
The call to action button communicates strong emphasis and is reserved for encouraging critical | ||
actions. In general, only use the emphasized option for the most important action on the page. | ||
|
||
<Canvas of={ButtonStories.Accent} /> | ||
|
||
### Primary | ||
|
||
The primary button is for medium emphasis. Use it in place of a call to action button when the | ||
action requires less prominence, or if there are multiple primary actions of the same importance | ||
in the same view. Both the fill (default) and outline styles are demonstrated below: | ||
|
||
<Canvas of={ButtonStories.Primary} /> | ||
|
||
### Secondary | ||
|
||
The secondary button is for low emphasis. It’s paired with other button types to surface less | ||
prominent actions, and should never be the only button in a group. Both the fill (default) and | ||
outline styles are demonstrated below: | ||
|
||
<Canvas of={ButtonStories.Secondary} /> | ||
|
||
### Negative | ||
|
||
The negative button is for emphasizing actions that can be destructive or have negative | ||
consequences if taken. Use it sparingly. | ||
|
||
<Canvas of={ButtonStories.Negative} /> | ||
|
||
## Static color | ||
|
||
When a button needs to be placed on top of a color background or a visual, use the static color | ||
option. Static color buttons do not change shades or values depending upon the color theme. | ||
|
||
### Static white - primary | ||
|
||
<Canvas of={ButtonStories.StaticWhitePrimary} /> | ||
|
||
### Static white - secondary | ||
|
||
<Canvas of={ButtonStories.StaticWhiteSecondary} /> | ||
|
||
### Static black - primary | ||
|
||
<Canvas of={ButtonStories.StaticBlackPrimary} /> | ||
|
||
### Static black - secondary | ||
|
||
<Canvas of={ButtonStories.StaticBlackSecondary} /> | ||
|
||
## Sizing | ||
|
||
Buttons come in four different sizes: small, medium, large, and extra large. The medium size is | ||
the default and most frequently used option. Use the other sizes sparingly; they should be used | ||
to create a hierarchy of importance within the page. | ||
|
||
<Canvas of={ButtonStories.Sizing} /> | ||
|
||
## Pending state | ||
|
||
The pending button is for indicating that a quick progress action is taking place. In this case, the | ||
label and optional icon disappear and a progress circle appears. The progress circle always shows an | ||
indeterminate progress. We recommend the use of the `.is-pending` class on the component’s parent | ||
container, but there is also an option to use an attribute of `pending` instead. Buttons should have | ||
the disabled attribute when the pending state is applied. | ||
|
||
<Canvas of={ButtonStories.Pending} /> | ||
|
||
## Disabled state | ||
|
||
A button in a disabled state shows that an action exists, but is not available in that circumstance. | ||
This state can be used to maintain layout continuity and to communicate that an action may become | ||
available later. | ||
|
||
<Canvas of={ButtonStories.Disabled} /> | ||
|
||
## Text overflow behavior | ||
|
||
When the button text is too long for the horizontal space available, it wraps to form another line. | ||
When there is no icon present, the text is aligned center. When there is an icon present, the text is | ||
aligned `start` (left with a writing direction of left-to-right) and the icon remains vertically aligned | ||
at the top. | ||
|
||
<Canvas of={ButtonStories.WithWrapping} /> |
Oops, something went wrong.