You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
'Button: when the isHamburger property is passed in, you must also pass in a boolean value to the isExpanded property. It is expected that a hamburger button controls the expansion of other content.'
167
161
);
168
162
}
169
-
// TODO: Remove isSettings || isHamburger conditional in breaking change to throw this warning for any button that does not have children or aria name
// TODO: Remove isSettings || isHamburger || isFavorite conditional in breaking change to throw this warning for any button that does not have children or aria name
Copy file name to clipboardExpand all lines: packages/react-core/src/components/Button/examples/Button.md
+40-14Lines changed: 40 additions & 14 deletions
Original file line number
Diff line number
Diff line change
@@ -23,74 +23,83 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
23
23
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.
24
24
25
25
```ts file="./ButtonVariations.tsx"
26
+
26
27
```
27
28
28
-
| Variant | Description|
29
-
| --- | ---|
30
-
| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
31
-
| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
32
-
| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons. |
33
-
| 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. |
34
-
| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way. |
35
-
| 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.|
36
-
| Plain | Plain buttons have no styling and are intended to be labeled with icons. |
37
-
| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group). |
38
-
| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.
| Primary | Primary buttons are the most visually prominent variant. Use for the most important call to action.|
32
+
| Secondary | Secondary buttons are less visually prominant than primary buttons. Use for general actions on a page that require less emphasis than primary buttons. |
33
+
| Tertiary | Tertiary buttons are the least visually prominent variant. Use to retain a classic button format with less emphasis than primary or secondary buttons.|
34
+
| 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.|
35
+
| Warning | Warning buttons may be used for actions that change an important setting or behavior, but not in a destructive or irreversible way.|
36
+
| 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.|
37
+
| Plain | Plain buttons have no styling and are intended to be labeled with icons.|
38
+
| Control | Control buttons can be labeled with text or icons. Primarily intended to be paired with other controls in an [input group](/components/input-group).|
39
+
| Stateful | Stateful buttons are ideal for displaying the state of notifications. They have 3 states: `read`, `unread` and `attention`.|
39
40
40
41
### Disabled buttons
41
42
42
43
To indicate that an action is currently unavailable, all button variations can be disabled using the `isDisabled` property.
43
44
44
45
```ts file="./ButtonDisabled.tsx"
46
+
45
47
```
46
48
47
49
### Small buttons
48
50
49
51
To fit into tight spaces, primary, secondary, tertiary, danger, and warning button variations can be made smaller using the `"sm"` value for the `size` property.
50
52
51
53
```ts file="./ButtonSmall.tsx"
54
+
52
55
```
53
56
54
57
### Call to action (CTA) buttons
55
58
56
-
CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property.
59
+
CTA buttons and links direct users to complete an action. Primary, secondary, tertiary, and link button variants can be styled as CTAs using the `"lg"` value for the `size` property.
57
60
58
61
```ts file="./ButtonCallToAction.tsx"
62
+
59
63
```
60
64
61
65
### Block level buttons
62
66
63
67
Block level buttons span the full width of the parent element and can be enabled using the `isBlock` property.
64
68
65
69
```ts file="./ButtonBlock.tsx"
70
+
66
71
```
67
72
68
73
### Progress indicators
69
74
70
-
Progress indicators can be added to buttons to identify that an action is in progress after a click.
75
+
Progress indicators can be added to buttons to identify that an action is in progress after a click.
71
76
72
77
```ts file="./ButtonProgress.tsx"
78
+
73
79
```
74
80
75
81
### Links as buttons
76
82
77
83
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.
78
84
79
85
```ts file="./ButtonLinks.tsx"
86
+
80
87
```
81
88
82
89
### Inline link as span
83
90
84
91
Inline links should use `component="span"` and the `isInline` property to wrap inline with surrounding text.
85
92
86
93
```ts file="./ButtonInlineSpanLink.tsx"
94
+
87
95
```
88
96
89
97
### Custom component
90
98
91
99
In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
92
100
93
101
```ts file="./ButtonCustomComponent.tsx"
102
+
94
103
```
95
104
96
105
### Aria-disabled examples
@@ -102,44 +111,61 @@ Buttons that are aria-disabled are similar to normal disabled buttons, except th
102
111
Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.
103
112
104
113
```ts file="./ButtonAriaDisabled.tsx"
114
+
105
115
```
106
116
107
117
### Button with count
108
118
109
119
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.
110
120
111
121
```ts file="./ButtonWithCount.tsx"
122
+
112
123
```
113
124
114
125
### Plain with no padding
115
126
116
127
To display a plain/icon button inline with text, use `noPadding` prop in addition to `variant="plain"`.
117
128
118
129
```ts file="./ButtonPlainHasNoPadding.tsx"
130
+
119
131
```
120
132
121
133
### Stateful
122
134
123
135
Stateful buttons are ideal for displaying the state of notifications. Use `variant="stateful"` alongside with the `state` property, which can have these 3 values: `read`, `unread` (used as default) and `attention` (which means unread and requires attention).
124
136
125
137
```ts file="./ButtonStateful.tsx"
138
+
126
139
```
127
140
141
+
## Animated examples
142
+
143
+
The following `<Button>` implementations have animations built into them. When using one of the following implementations, the `icon` property will be overridden due to the animations needing specific icons internally.
144
+
128
145
### Favorite
129
146
130
147
You can pass both the `isFavorite` and `variant="plain"` properties into the `<Button>` to create a favorite button. Passing the `isFavorited` property will determine the current favorited state and update styling accordingly.
131
148
132
149
```ts file = "./ButtonFavorite.tsx"
150
+
133
151
```
134
152
135
-
### Settings
153
+
### Settings
154
+
155
+
For a "settings" button with animations on hover and focus, you can pass the `isSettings` property into either a `variant="plain"` or `variant="control"` button.
136
156
137
157
```ts file="./ButtonSettings.tsx"
158
+
138
159
```
139
160
140
161
### Hamburger
141
162
163
+
For a "hamburger" button (`fa-bars`) that will animate based on the `hamburgerVariant` property, you can pass the `isHamburger` property. This will render the default icon for a hamburger button, and updating the `hamburgerVariant` property with a value of either "expand" or "collapse" will change the icon accordingly with an animation on hover and focus.
164
+
165
+
When used within a PatternFly `<Masthead>`, the animations and icon updates will occur automatically. See one of our [full screen page demos](/components/page/react-demos) to see this in action.
To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
0 commit comments