---
id: Label group
section: components
cssPrefix: pf-c-label
propComponents: ['LabelGroup', 'Label']
ouia: true
---

import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';

## Examples

### Basic

```ts file="LabelGroupBasic.tsx"
```

### Overflow

```ts file="LabelGroupOverflow.tsx"
```

### Category

```ts file="LabelGroupCategory.tsx"
```

### Category removable

```ts file="LabelGroupCategoryRemovable.tsx"
```

### Vertical category overflow removable

```ts file="LabelGroupVerticalCategoryOverflowRemovable.tsx"
```

### Editable labels

```ts isBeta file="LabelGroupEditableLabels.tsx"
```

### Editable labels with add button

For additional documentation that showcases adding a new label, see [label group demos](/components/label-group/react-demos).

```ts isBeta file="LabelGroupEditableAdd.tsx"
```