- React

## Examples

### Filled labels

### Outlined labels

### Compact labels

### Label with custom render

Labels may be passed a custom renderer to display customized content or for use with router components. When using a custom render, `isClickable` may also be passed to remove the underline text decoration of anchors or router links.

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

### Basic label group

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

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

### Label group with categories

Use a category name to organize a set of labels

### Label group with removable categories

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

### Editable label group

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

## Using router links

Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can use the `render` property of the `Label`:

    <Label
      render={({ className, content, componentRef }) => (
        <Link to="/" className={className} innerRef={componentRef}>
          {content}
        </Link>
      )}
    >
      Label router link
    </Label>

##
CSS variables