---
metaTitle: Label component | AwesCode UI
meta:
  - name: description
    content: The <AwLabel /> component is used to render Label - UI Vue component for AwesCode UI.
title: Label
---

# Label

**Category:** Atom | **Import:** Global

The `AwLabel` component displays a styled label with optional icons and customizable colors.

## Overview

`AwLabel` provides a badge-like label component that can display text with optional leading and trailing icons. It supports custom colors and is commonly used for tags, categories, and status indicators.

## Usage

### Basic Example

```markup
<AwLabel label="New" />
```

### With Icons

```markup
<AwLabel label="Featured" icon="awesio/star" />
<AwLabel label="Verified" icon="awesio/check" icon-second="awesio/close" />
```

### With Colors

```markup
<AwLabel label="Success" color="success" />
<AwLabel label="Warning" color="warning" />
```

### Boolean Icon

```markup
<AwLabel label="Active" :icon="true" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| label | Label text | `String` | `true` | - |
| color | Background color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
| onColor | Text/icon color - see [Built-in Colors](/reference/colors) | `String` | `false` | `''` |
| icon | Leading icon (boolean for default, string for custom) - see [Built-in Icons](/reference/icons) | `Boolean` / `String` | `false` | `null` |
| iconSecond | Trailing icon name - see [Built-in Icons](/reference/icons) | `String` | `false` | `null` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom label content (replaces label prop) | - | Label text |

### Events

No events are emitted by this component.

## Component Behavior

### Icon Handling
- **Boolean icon:** When `icon` is `true`, displays `awesio/circle` icon
- **String icon:** When `icon` is a string, displays that icon name
- **Null/false icon:** When `icon` is `null` or `false`, no icon displayed
- Icons are automatically rendered using `AwIcon` component with size 16
- Icons have `aria-hidden="true"` for accessibility

### Icon Type Detection
- Component checks if icon exists in mono icon set
- System icons (mono) are detected automatically
- Non-system icons handled via AwIcon component

### Color System
- **Default colors (no color/onColor specified):**
  - Background: `var(--c-mono-900)`
  - Text/icon: `var(--c-mono-400)`
- **With color prop:**
  - Background: Uses `toColor(color)` utility
  - Text/icon: Auto-calculated using `toOnColor(color)` for contrast
- **With onColor prop:**
  - Overrides automatic text/icon color
  - Uses `toColor(onColor)` utility

### Available Colors
- **Semantic colors:** `success`, `warning`, `error`, `info`, `accent`, `notify`
- **Mono scale:** `mono-0` through `mono-900` (in increments of 50/100)
- **Named colors:** `red`, `peach`, `yellow`, `magenta`, `purple`, `light-blue`, `blue`, `green`, `lime`, `grey`, `light-grey`, `black`, `forest`, `brown`
- All colors automatically get proper contrast text/icon colors via `toOnColor` utility

### Style Variables
Component uses CSS custom properties:
- `--aw-label-bg` - Background color
- `--aw-label-on-color` - Text and icon color

### Rendering
- Component only renders if `label` prop is provided
- Default slot replaces label text but label prop is still required
- Icons positioned via flexbox: leading icon → text → trailing icon

### Structure
```
<div class="aw-label" :style="{ --aw-label-bg, --aw-label-on-color }">
  <AwIcon v-if="_icon" :name="_icon" size="16" />
  <slot>{{ label }}</slot>
  <AwIcon v-if="iconSecond" :name="iconSecond" size="16" />
</div>
```

## Related Components

- `AwTag` - Tag component
- `AwBadge` - Badge component
- `AwIcon` - Icon component

## Notes

- **Import Method:** Global - Available as atom component
- When `icon` is `true`, displays default circle icon (`awesio/circle`)
- When `icon` is a string, displays that icon
- System icons are automatically detected from mono icon set
- Default colors are mono-900 background with mono-400 text if no colors specified
- Use `onColor` to override text color when using custom background color
- Label prop is required even when using default slot
- Icons are always size 16 and have aria-hidden attribute
- Color utilities (`toColor`, `toOnColor`) handle color name to CSS variable conversion