import './Label.css'

## Examples

### Filled


import Example1 from './Example1.html?raw'

<LiveExample html={Example1} />

### Outline


import Example2 from './Example2.html?raw'

<LiveExample html={Example2} />

### Compact


import Example3 from './Example3.html?raw'

<LiveExample html={Example3} />

### Overflow

This style of label is used to indicate overflow within a label group.


import Example4 from './Example4.html?raw'

<LiveExample html={Example4} />

### Editable

**Note: Editable label behavior must be handled with JavaScript.**


import Example5 from './Example5.html?raw'

<LiveExample html={Example5} />

### Add label

This style of label is used to add new labels to a label group.


import Example6 from './Example6.html?raw'

<LiveExample html={Example6} />

### Basic label group

Use a label group to display multiple labels at once.


import Example7 from './Example7.html?raw'

<LiveExample html={Example7} />

### Label group with overflow


import Example8 from './Example8.html?raw'

<LiveExample html={Example8} />

### Label group with overflow expanded


import Example9 from './Example9.html?raw'

<LiveExample html={Example9} />

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


import Example10 from './Example10.html?raw'

<LiveExample html={Example10} />

### Label group with category label


import Example11 from './Example11.html?raw'

<LiveExample html={Example11} />

### Label group with removable categories


import Example12 from './Example12.html?raw'

<LiveExample html={Example12} />

### Vertical label group


import Example13 from './Example13.html?raw'

<LiveExample html={Example13} />

### Vertical label group with overflow


import Example14 from './Example14.html?raw'

<LiveExample html={Example14} />

### Vertical label group with overflow expanded


import Example15 from './Example15.html?raw'

<LiveExample html={Example15} />

### Vertical label group with category


import Example16 from './Example16.html?raw'

<LiveExample html={Example16} />

### Vertical label group with removable category


import Example17 from './Example17.html?raw'

<LiveExample html={Example17} />

In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:

* `.pf-v6-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v6-c-label-group__textarea`

### Editable labels, dynamic label group


import Example18 from './Example18.html?raw'

<LiveExample html={Example18} />

### Editable labels, label active, dynamic label group


import Example19 from './Example19.html?raw'

<LiveExample html={Example19} />

### Static labels, dynamic label group


import Example20 from './Example20.html?raw'

<LiveExample html={Example20} />

### Mixed labels (static / editable), dynamic label group


import Example21 from './Example21.html?raw'

<LiveExample html={Example21} />

### Label group with compact labels


import Example22 from './Example22.html?raw'

<LiveExample html={Example22} />

### Label group with compact labels and overflow


import Example23 from './Example23.html?raw'

<LiveExample html={Example23} />

### Vertical label group with compact labels


import Example24 from './Example24.html?raw'

<LiveExample html={Example24} />

### Labels with truncation


import Example25 from './Example25.html?raw'

<LiveExample html={Example25} />

## Documentation

### Label usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required. Note: always use with either `.pf-m-filled` or `.pf-m-outline`.** |
| `.pf-v6-c-label__content` | `<span>`, `<a>`, `<button>` | Creates a content wrapper. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
| `.pf-v6-c-label__icon` | `<span>` | Initiates a label icon. |
| `.pf-v6-c-label__text` | `<span>` | Initiates label text. **Required** |
| `.pf-v6-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
| `.pf-v6-c-label__actions` | `<span>` | Creates a wrapper for label actions. **Required for removable labels** |
| `.pf-m-filled` | `.pf-v6-c-label` | Modifies label for filled styles. |
| `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. |
| `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. |
| `.pf-m-overflow` | `.pf-v6-c-label` | Modifies label for overflow styles for use in a label group. |
| `.pf-m-add` | `.pf-v6-c-label` | Modifies label for add styles for use in a label group. |
| `.pf-m-blue` | `.pf-v6-c-label` | Modifies the label to have blue colored styling. |
| `.pf-m-green` | `.pf-v6-c-label` | Modifies the label to have green colored styling. |
| `.pf-m-orange` | `.pf-v6-c-label` | Modifies the label to have orange colored styling. |
| `.pf-m-red` | `.pf-v6-c-label` | Modifies the label to have red colored styling. |
| `.pf-m-purple` | `.pf-v6-c-label` | Modifies the label to have purple colored styling. |
| `.pf-m-teal` | `.pf-v6-c-label` | Modifies the label to have teal colored styling. |
| `.pf-m-yellow` | `.pf-v6-c-label` | Modifies the label to have yellow colored styling. |
| `.pf-m-success` | `.pf-v6-c-label` | Modifies the label to have success colored styling. |
| `.pf-m-warning` | `.pf-v6-c-label` | Modifies the label to have warning colored styling. |
| `.pf-m-danger` | `.pf-v6-c-label` | Modifies the label to have danger colored styling. |
| `.pf-m-info` | `.pf-v6-c-label` | Modifies the label to have info colored styling. |
| `.pf-m-custom` | `.pf-v6-c-label` | Modifies the label to have custom colored styling. |
| `.pf-m-disabled` | `.pf-v6-c-label` | Modifies label for disabled styles. |
| `.pf-m-editable` | `.pf-v6-c-label` | Modifies label for editable styles. |
| `.pf-m-editable-active` | `.pf-v6-c-label.pf-m-editable` | Modifies editable label for active styles. |
| `--pf-v6-c-label__text--MaxWidth` | `.pf-v6-c-label` | Modifiex the max width of the text before text will truncate. |

### Label group accessibility

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `role="list"` | `.pf-v6-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v6-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
| `aria-label="[button label text]"` | `.pf-v6-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
| `aria-labelledby="[id value of .pf-v6-c-label-group__close > button] [id value of .pf-v6-c-label-group__label]"` | `.pf-v6-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
| `aria-label="[label text]"` | `.pf-v6-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
| `row="1"` | `.pf-v6-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
| `tabindex="0"` | `.pf-v6-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |

### Label group usage

| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
| `.pf-v6-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
| `.pf-v6-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
| `.pf-v6-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
| `.pf-v6-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
| `.pf-v6-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
| `.pf-v6-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
| `.pf-v6-c-button` | `.pf-v6-c-label-group__close <button>` | Initiates the button used to remove the label group. |
| `.pf-m-editable` | `.pf-v6-c-label-group` | Modifies the label group to support editable styling. |
| `.pf-m-category` | `.pf-v6-c-label-group` | Modifies the label group to support category styling. |
| `.pf-m-textarea` | `.pf-v6-c-label-group__list-item` | Modifies the label group list item to support textarea. |