Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 3 additions & 15 deletions packages/react-core/src/components/Button/examples/Button.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,26 +96,14 @@ Router links can be used for in-app linking in React environments to prevent pag

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="./ButtonAriaDisabled.tsx"
```

### Aria-disabled with tooltip

Unlike normal disabled buttons, aria-disabled buttons can support tooltips.

```ts file="./ButtonAriaDisabledTooltip.tsx"
```

### Aria-disabled link as button with tooltip

Aria-disabled buttons can operate as links, which also support tooltips.
Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.

```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
Comment thread
andyyvo marked this conversation as resolved.
```ts file="./ButtonAriaDisabled.tsx"
```

### Button with count

Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.

```ts file="./ButtonWithCount.tsx" isBeta
```
```
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import React from 'react';
import { Button } from '@patternfly/react-core';
import { Button, Tooltip } from '@patternfly/react-core';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';

export const ButtonAriaDisabled: React.FunctionComponent = () => (
<React.Fragment>
<Button isAriaDisabled>Primary aria disabled</Button> <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
<Button isAriaDisabled>Primary aria disabled</Button>
<Button isAriaDisabled>Secondary aria disabled</Button>{' '}
<Button variant="secondary" isDanger isAriaDisabled>
Danger secondary aria disabled
</Button>{' '}
Expand Down Expand Up @@ -35,5 +36,17 @@ export const ButtonAriaDisabled: React.FunctionComponent = () => (
<Button isAriaDisabled variant="control">
Control aria disabled
</Button>
<br />
<br />
<Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
<Button isAriaDisabled variant="secondary">
Secondary button to core docs
</Button>
</Tooltip>{' '}
<Tooltip content="Aria-disabled link as button with tooltip">
<Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
Tertiary link as button to core docs
</Button>
</Tooltip>
</React.Fragment>
);

This file was deleted.

This file was deleted.