Skip to content

Commit f96f7a0

Browse files
authored
docs(toggle-group): Adds example documentation. (#10309)
* docs(toggle-group): Adds example documentation. * Updates per feedback.
1 parent 2d19e26 commit f96f7a0

File tree

1 file changed

+33
-8
lines changed

1 file changed

+33
-8
lines changed

packages/react-core/src/components/ToggleGroup/examples/ToggleGroup.md

+33-8
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,47 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square
1313

1414
## Examples
1515

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.
1921

20-
### Default with single selectable
2122
```ts file="./ToggleGroupDefaultSingle.tsx"
2223
```
2324

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+
2540
```ts file="./ToggleGroupIcon.tsx"
2641
```
2742

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+
2949
```ts file="./ToggleGroupTextIcon.tsx"
3050
```
3151

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+
3358
```ts file="./ToggleGroupCompact.tsx"
34-
```
59+
```

0 commit comments

Comments
 (0)