@@ -13,22 +13,47 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
13
13
14
14
## Examples
15
15
16
- ### Default with multiple selectable
17
- ``` ts file="./ToggleGroupDefaultMultiple.tsx"
18
- ```
16
+ ### Single select toggle group
17
+
18
+ A single select toggle group allows users to toggle between multiple items.
19
+
20
+ To indicate whether a ` <ToggleGroupItem> ` is selected or not, use the ` isSelected ` property.
19
21
20
- ### Default with single selectable
21
22
``` ts file="./ToggleGroupDefaultSingle.tsx"
22
23
```
23
24
24
- ### Icons
25
+ ### Multi select toggle group
26
+
27
+ A multi select toggle group allows users to select multiple items at once.
28
+
29
+ When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.
30
+
31
+ ``` ts file="./ToggleGroupDefaultMultiple.tsx"
32
+ ```
33
+
34
+ ### With icons
35
+
36
+ You can use a recognizable icon as a toggle item label.
37
+
38
+ To do this, pass an imported icon to the ` icon ` property of a ` <ToggleGroupItem> ` .
39
+
25
40
``` ts file="./ToggleGroupIcon.tsx"
26
41
```
27
42
28
- ### Text and icons
43
+ ### With text and icons
44
+
45
+ Adding text to a toggle item with an icon helps clarify the button's function.
46
+
47
+ To do this, pass a descriptive label to the ` text ` property of a ` <ToggleGroupItem> ` .
48
+
29
49
``` ts file="./ToggleGroupTextIcon.tsx"
30
50
```
31
51
32
- ### Compact variant
52
+ ### Compact toggle group
53
+
54
+ When space in a UI is limited, you can use a compact toggle group.
55
+
56
+ To apply compact styling to a ` <ToggleGroup> ` , use ` isCompact ` .
57
+
33
58
``` ts file="./ToggleGroupCompact.tsx"
34
- ```
59
+ ```
0 commit comments