> For the complete documentation index, see [llms.txt](https://spectrecss.angular-package.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://spectrecss.angular-package.dev/css-color-classes/label-colors.md).

# Label colors

Label color variants are included by using the [`label-class-variant()`](/mixin/label/label-class-variant.md) mixin that uses  [`color()`](/function/color/color.md) function, in the `.label` class as its extension in the [`src/_labels.scss`](https://github.com/angular-package/spectre.css/blob/master/src/_labels.scss) file.

### Core colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Accent.
  @include label-class-variant(
    $name: 'accent',
    $color: 'light-color',
    $bg-color: 'accent-color'
  );
  
  // Primary.
  @include label-class-variant(
    $name: 'primary',
    $color: 'light-color',
    $bg-color: 'primary-color'
  );

  // Primary dark.
  @include label-class-variant(
    $name: 'primary-dark',
    $color: 'light-color',
    $bg-color: 'primary-color-dark'
  );

  // Primary light.
  @include label-class-variant(
    $name: 'primary-light',
    $color: 'light-color',
    $bg-color: 'primary-color-light'
  );
  
  // Secondary.
  @include label-class-variant(
    $name: 'secondary',
    $color: 'primary-color',
    $bg-color: 'secondary-color'
  );

  // Secondary dark.
  @include label-class-variant(
    $name: 'secondary-dark',
    $color: 'primary-color',
    $bg-color: 'secondary-color-dark'
  );

  // Secondary light.
  @include label-class-variant(
    $name: 'secondary-light',
    $color: 'primary-color',
    $bg-color: 'secondary-color-light'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Accent -->
<span class="label label-accent">accent label</span>

<!-- Primary -->
<span class="label label-primary">primary label</span>

<!-- Primary dark -->
<span class="label label-primary-dark">primary dark label</span>

<!-- Primary light -->
<span class="label label-primary-light">primary light label</span>

<!-- Secondary -->
<span class="label label-secondary">secondary label</span>

<!-- Secondary dark -->
<span class="label label-secondary-dark">secondary dark label</span>

<!-- Secondary light -->
<span class="label label-secondary-light">secondary light label</span>
```

### Shades

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Dark.
  @include label-class-variant(
    $name: 'dark',
    $color: 'light-color',
    $bg-color: 'dark-color'
  );

  // Light.
  @include label-class-variant(
    $name: 'light',
    $color: 'body-font-color',
    $bg-color: 'light-color'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Dark -->
<span class="label label-dark">dark label</span>

<!-- Light -->
<span class="label label-light">light label</span>
```

### Gray colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Gray.
  @include label-class-variant(
    $name: 'gray',
    $color: 'gray-color-dark',
    $bg-color: 'gray-color'
  );

  // Gray dark.
  @include label-class-variant(
    $name: 'gray-dark',
    $color: 'gray-color-light',
    $bg-color: 'gray-color-dark'
  );

  // Gray light.
  @include label-class-variant(
    $name: 'gray-light',
    $color: 'gray-color-dark',
    $bg-color: 'gray-color-light'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Gray -->
<span class="label label-gray">gray label</span>

<!-- Gray dark -->
<span class="label label-gray-dark">gray dark label</span>

<!-- Gray light -->
<span class="label label-gray-light">gray light label</span>
```

### Link colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Link.
  @include label-class-variant(
    $name: 'link',
    $color: 'link-color-light',
    $bg-color: 'link-color'
  );

  // Link dark.
  @include label-class-variant(
    $name: 'link-dark',
    $color: 'link-color-light',
    $bg-color: 'link-color-dark'
  );

  // Link light.
  @include label-class-variant(
    $name: 'link-light',
    $color: 'link-color-dark',
    $bg-color: 'link-color-light'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Link -->
<span class="label label-link">link label</span>

<!-- Link dark -->
<span class="label label-link-dark">link dark label</span>

<!-- Link light -->
<span class="label label-link-light">link light label</span>
```

### Body colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Body bg.
  @include label-class-variant(
    $name: 'body-bg',
    $color: 'body-font-color',
    $bg-color: 'body-bg-color'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Body bg -->
<span class="label label-body-bg">body bg label</span>
```

### Bg colors

{% code title="src/\_variables.scss" %}

```scss
.label {
  // Bg.
  @include label-class-variant(
    $name: 'bg',
    $color: 'body-font-color',
    $bg-color: 'bg-color'
  );

  // Bg dark.
  @include label-class-variant(
    $name: 'bg-dark',
    $color: 'body-font-color',
    $bg-color: 'bg-color-dark'
  );

  // Bg light.
  @include label-class-variant(
    $name: 'bg-light',
    $color: 'body-font-color',
    $bg-color: 'bg-color-light'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Bg -->
<span class="label label-bg">bg label</span>

<!-- Bg dark -->
<span class="label label-bg-dark">bg dark label</span>

<!-- Bg light -->
<span class="label label-bg-light">bg light label</span>
```

### Control colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Disabled.
  @include label-class-variant(
    $name: 'disabled',
    $color: (
      'disabled-color',
      -10%,
    ),
    $bg-color: 'disabled-color'
  );

  // Error.
  @include label-class-variant(
    $name: 'error',
    $color: 'light-color',
    $bg-color: 'error-color'
  );

  // Info.
  @include label-class-variant(
    $name: 'info',
    $color: (
      'info-color',
      -60%,
    ),
    $bg-color: 'info-color'
  );

  // Success.
  @include label-class-variant(
    $name: 'success',
    $color: 'light-color',
    $bg-color: 'success-color'
  );

  // Warning.
  @include label-class-variant(
    $name: 'warning',
    $color: 'light-color',
    $bg-color: 'warning-color'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Disabled -->
<span class="label label-disabled">disabled label</span>

<!-- Error -->
<span class="label label-error">error label</span>

<!-- Info -->
<span class="label label-info">info label</span>

<!-- Info -->
<span class="label label-success">success label</span>

<!-- Warning -->
<span class="label label-warning">warning label</span>
```

### Other colors

{% code title="src/\_labels.scss" %}

```scss
.label {
  // Code.
  @include label-class-variant(
    $name: 'code',
    $color: 'light-color',
    $bg-color: 'code-color'
  );

  // Highlight.
  @include label-class-variant(
    $name: 'highlight',
    $color: (
      'highlight-color',
      -50%,
    ),
    $bg-color: 'highlight-color'
  );
}
```

{% endcode %}

Which results in the ability to use classes as follows.

```html
<!-- Code -->
<span class="label label-code">code label</span>

<!-- Highlight -->
<span class="label label-highlight">highlight label</span>
```

{% embed url="<https://github.com/angular-package/spectre.css/blob/master/src/_labels.scss>" %}

{% embed url="<https://angular-package.github.io/spectre.css/elements/labels.html>" %}
Modified Spectre.css documentation.
{% endembed %}

### Demonstration

{% embed url="<https://angular-package.dev/ui-kit/component/label>" %}
Label demonstration
{% endembed %}