import './Label.css';

## Examples

### Filled labels


import LabelFilled from "./LabelFilled.tsx?raw"

<LiveExample src={LabelFilled} />

### Outlined labels


import LabelOutline from "./LabelOutline.tsx?raw"

<LiveExample src={LabelOutline} />

### Compact labels


import LabelCompact from "./LabelCompact.tsx?raw"

<LiveExample src={LabelCompact} />

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


import LabelCustomRender from "./LabelCustomRender.tsx?raw"

<LiveExample src={LabelCustomRender} />

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


import LabelEditable from "./LabelEditable.tsx?raw"

<LiveExample src={LabelEditable} />

### Basic label group

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


import LabelGroupBasic from "./LabelGroupBasic.tsx?raw"

<LiveExample src={LabelGroupBasic} />

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


import LabelGroupOverflow from "./LabelGroupOverflow.tsx?raw"

<LiveExample src={LabelGroupOverflow} />

### Label group with categories

Use a category name to organize a set of labels


import LabelGroupCategory from "./LabelGroupCategory.tsx?raw"

<LiveExample src={LabelGroupCategory} />

### Label group with removable categories


import LabelGroupCategoryRemovable from "./LabelGroupCategoryRemovable.tsx?raw"

<LiveExample src={LabelGroupCategoryRemovable} />

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


import LabelGroupVerticalCategoryOverflowRemovable from "./LabelGroupVerticalCategoryOverflowRemovable.tsx?raw"

<LiveExample src={LabelGroupVerticalCategoryOverflowRemovable} />

### Editable label group


import LabelGroupEditableLabels from "./LabelGroupEditableLabels.tsx?raw"

<LiveExample src={LabelGroupEditableLabels} />

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


import LabelGroupEditableAdd from "./LabelGroupEditableAdd.tsx?raw"

<LiveExample src={LabelGroupEditableAdd} />

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