@patternfly/react-core/src/components/Label/examples/Label.md

This library provides a set of common React components for use with the PatternFly reference implementation.

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

import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
import { Link } from '@reach/router';

## Examples

### Filled labels

```ts file="LabelFilled.tsx"
```

### Outlined labels

```ts file="LabelOutline.tsx"
```

### Compact labels

```ts file="LabelCompact.tsx"
```

### Label with router link

```ts file="LabelRouterLink.tsx"
```

### Editable labels

Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape. 

You can also customize any Label's close button aria-label as this example shows with `closeBtnAriaLabel`.

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


### Basic label group
Use a label group when you have multiple labels to display at once. 

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

### Label group with overflow
An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.

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

### Label group with categories
Use a category name to organize a set of labels

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

### Label group with removable categories

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

### Vertical label group
Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.

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

### Editable label group

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

### Editable label group with add button

The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see [label demos](/components/label/react-demos).

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