- React
- HTML

import ’./Label.css’

## Examples

### Filled

### Outline

### Compact

### Overflow

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

### Editable

Note: Editable label behavior must be handled with JavaScript.

### Add label

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

### Basic label group

Use a label group to display multiple labels at once.

### Label group with overflow

### Label group with overflow expanded

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

### Label group with category label

### Label group with removable categories

### Vertical label group

### Vertical label group with overflow

### Vertical label group with overflow expanded

### Vertical label group with category

### Vertical label group with removable category

In addition to the JavaScript management of editable labels, 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

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

### Static labels, dynamic label group

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

### Label group with compact labels

### Label group with compact labels and overflow

### Vertical label group with compact labels

### Labels with truncation

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

##
CSS variables