<commit_before>/*doc
---
title: Labels
name: label
categories:
  - Elements
  - All
---

Labels are based on Bootstrap's labels.
Here's an example of a label on its own.

```html_example_table
<span class="label label-primary">new</span>
```

You can also place labels within HTML elements.
It will be sized based on the element's font size and its font modifiers.

```html_example_table
<p>I am a P.
  <span class="label label-primary">new</span>
</p>

<h3>I am an H3.
  <span class="label label-primary">new</span>
</h3>

<h3 class="h5">I am an H3 with an H5 modifier.
  <span class="label label-primary">new</span>
</h3>
```
*/

.label {
  padding: 0.2em 0.6em;
  border-radius: 3px;
  text-transform: uppercase;
}

/*doc
---
title: Removable Labels
name: removable_label
parent: label
---

Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.

```html_example
<span class="label-removable">Removable
  <a class="close-btn fa fa-close"></a>
</span>
```
*/

.label-removable {
  padding: 4px 7px;
  border-radius: 3px;
  background-color: $brand-3;
  color: $neutral-11;
  font-weight: $font-weight-em-high;

  .close-btn {
    margin-left: 15px;
    color: $glow-4;

    &:hover {
      color: $neutral-11;
      text-decoration: none;
    }
  }
}

/*doc
---
title: React Labels
name: react_label
categories:
  - Beta
---

```react_example_table
<UI.Label>yeah</UI.Label>

<UI.DefaultH3>
  Now the label is in a typography component <UI.Label>yeah</UI.Label>
</UI.DefaultH3>
```
*/<commit_msg>chore(docs): Backfill React Label documentation.<commit_after>/*doc
---
title: Labels
name: label
categories:
  - Elements
  - All
---

Labels are based on Bootstrap's labels.
Here's an example of a label on its own.

```html_example_table
<span class="label label-primary">new</span>
```

You can also place labels within HTML elements.
It will be sized based on the element's font size and its font modifiers.

```html_example_table
<p>I am a P.
  <span class="label label-primary">new</span>
</p>

<h3>I am an H3.
  <span class="label label-primary">new</span>
</h3>

<h3 class="h5">I am an H3 with an H5 modifier.
  <span class="label label-primary">new</span>
</h3>
```
*/

.label {
  padding: 0.2em 0.6em;
  border-radius: 3px;
  text-transform: uppercase;
}

/*doc
---
title: Removable Labels
name: removable_label
parent: label
---

Removable labels are used as tags in an editable list. The user will either enter text or select content (i.e.: a dropdown item), and it will be styled as a removable label (most likely in a list). Developers who use these labels must implement the close functionality for when the user clicks the close button.

```html_example
<span class="label-removable">Removable
  <a class="close-btn fa fa-close"></a>
</span>
```
*/

.label-removable {
  padding: 4px 7px;
  border-radius: 3px;
  background-color: $brand-3;
  color: $neutral-11;
  font-weight: $font-weight-em-high;

  .close-btn {
    margin-left: 15px;
    color: $glow-4;

    &:hover {
      color: $neutral-11;
      text-decoration: none;
    }
  }
}

/*doc
---
title: React Labels
name: react_label
categories:
  - Beta
---

Labels are based on Bootstrap's labels.

Labels can be used on their own:

```react_example
<UI.Label>yeah</UI.Label>
```
Labels used within an element which already has font modifier styles will use the parents' styling. For example:

```react_example
<UI.DefaultH3>
  Now the label is in a typography component <UI.Label>yeah</UI.Label>
</UI.DefaultH3>
```
*/
{'fraction_non_alphanumeric': 0.1344717182497332, 'fraction_numerical': 0.013874066168623266, 'mean_word_length': 3.566382460414129, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 51, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1771373', 'n_tokens_mistral': 1359, 'n_tokens_neox': 1278, 'n_words': 438}