---
id: Label
section: components
cssPrefix: pf-c-label
propComponents: ['Label']
---

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

## Examples

### Filled

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

### Outline

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

### Compact

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

### Router link

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

### Editable

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
```