Skip to content

Commit

Permalink
docs(toggle-group): Adds example documentation.
Browse files Browse the repository at this point in the history
  • Loading branch information
edonehoo committed Apr 26, 2024
1 parent 75849b0 commit 1c6caac
Showing 1 changed file with 37 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,51 @@ import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square

## Examples

### Default with multiple selectable
```ts file="./ToggleGroupDefaultMultiple.tsx"
```
### Single select toggle group

A single select toggle group allows users to toggle between multiple items.

To support single selection, use the `onChange` callback to pass the selected `<ToggleGroupItem>` to `isSelected`.

### Default with single selectable
```ts file="./ToggleGroupDefaultSingle.tsx"
```

### Icons
### Multi select toggle group

A multi select toggle group allows users to select multiple items at once.

When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.

To support multiple selection, use the `onChange` callback to pass each selected `<ToggleGroupItem>` to `isSelected`.

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

### With icons

You can use a recognizable icon as a toggle item label.

To do this, pass an imported icon to the `icon` property of a `<ToggleGroupItem>`.

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

### Text and icons
### With text and icons

Adding text to a toggle item with an icon helps clarify the button's function.

To do this, pass a descriptive label to the `text` property of a `<ToggleGroupItem>`.

When passing both `text` and `icon` properties to a `<ToggleGroupItem>`, you can also pass in `iconPosition` to determine whether the icon is rendered at the start or end of the item.

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

### Compact variant
### Compact toggle group

When space in a UI is limited, you can use a compact toggle group.

To apply compact styling to a `<ToggleGroup>`, use `isCompact`.

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

0 comments on commit 1c6caac

Please sign in to comment.