diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md index ae96055698a..2340116a2fb 100644 --- a/packages/react-core/src/components/Button/examples/Button.md +++ b/packages/react-core/src/components/Button/examples/Button.md @@ -16,68 +16,99 @@ import { Link } from '@reach/router'; ## Examples -### Variations +### Variant examples + +PatternFly supports several button styling variants to be used in different scenarios as needed. The following button variants can be assigned using the `variant` property. ```ts file="./ButtonVariations.tsx" ``` -### Disabled +| Variant | Description| +| --- | ---| +| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.| +| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. | +| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons. | +| Danger | Danger buttons may be used for actions that are potentially destructive or difficult/impossible to undo. Danger is an independent variant, but all button variants may use the the `isDanger` property to apply similar styling. | +| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. | +| Link | Links are labeled, but have no background or border. Use for actions that require less emphasis, actions that navigate users to another page within the same window, and/or actions that navigate to external pages in a new window. Links may be placed inline with text using the `isInline` property.| +| Plain | Plain buttons have no styling and are intended to be labeled with icons. | +| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](https://www.patternfly.org/v4/components/input-group). | + +### Disabled buttons + +To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property. ```ts file="./ButtonDisabled.tsx" ``` -### Aria disabled +### Small buttons -```ts file="./ButtonAriaDisabled.tsx" +To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `isSmall` property. + +```ts file="./ButtonSmall.tsx" ``` -### Aria disabled button with tooltip +### Call to action (CTA) buttons -```ts file="./ButtonAriaDisabledTooltip.tsx" +CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `isLarge` property. + +```ts file="./ButtonCallToAction.tsx" ``` -### Aria disabled link as button with tooltip +### Block level buttons -```ts file="./ButtonAriaDisabledLinkTooltip.tsx" +Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property. + +```ts file="./ButtonBlock.tsx" +``` + +### Progress indicators + +Progress indicators can be added to buttons to identify that an action is in progress after a click. + +```ts file="./ButtonProgress.tsx" ``` ### Links as buttons +Buttons that link to another resource may take the form of primary, secondary, tertiary, or link variants. Use `component="a"` and an `href` property to designate the button's target link. + ```ts file="./ButtonLinks.tsx" ``` ### Inline link as span +Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text. + ```ts file="./ButtonInlineSpanLink.tsx" ``` -### Block level - -```ts file="./ButtonBlock.tsx" -``` +### Router link -### Types +Router links can be used for in-app linking in React environments to prevent page reloading. -```ts file="./ButtonTypes.tsx" +```ts file="./ButtonRouterLink.tsx" ``` -### Small +### Aria-disabled examples -```ts file="./ButtonSmall.tsx" -``` +[Accessible Rich Internet Applications (ARIA)](https://www.w3.org/WAI/standards-guidelines/aria/) is a set of roles and attributes specified by the World Wide Web Consortium. ARIA defines ways to make web content and web applications more accessible to people with disabilities. -### Call to action +Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property. -```ts file="./ButtonCallToAction.tsx" +```ts file="./ButtonAriaDisabled.tsx" ``` -### Progress +### Aria-disabled with tooltip -```ts file="./ButtonProgress.tsx" +Unlike normal disabled buttons, aria-disabled buttons can support tooltips. + +```ts file="./ButtonAriaDisabledTooltip.tsx" ``` -### Router link +### Aria-disabled link as button with tooltip -```ts file="./ButtonRouterLink.tsx" -``` +Aria-disabled buttons can operate as links, which also support tooltips. +```ts file="./ButtonAriaDisabledLinkTooltip.tsx" +``` \ No newline at end of file diff --git a/packages/react-core/src/demos/Button.md b/packages/react-core/src/demos/Button.md index 15e94cc2000..a343e706692 100644 --- a/packages/react-core/src/demos/Button.md +++ b/packages/react-core/src/demos/Button.md @@ -5,10 +5,14 @@ section: components import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -## Demos +## Demos ### Progress button +The following demo shows the intended flow for a button that visually indicates progress. This example demonstrates a login process, which updates the button label based on the `loginState`. + +Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. + ```ts import React from 'react'; import { Form, FormGroup, ActionGroup, InputGroup, TextInput, Button } from '@patternfly/react-core';