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

# Tag

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

The `AwTag` component displays a styled tag/badge with optional icon and customizable colors.

## Overview

`AwTag` provides a small badge-like component for displaying tags, labels, or status indicators. It supports custom colors, icons, and can render as different HTML tags.

## Usage

### Basic Example

```markup
<AwTag text="New" />
```

### With Icon

```markup
<AwTag text="Featured" icon="awesio/star" />
```

### With Animated Icon

```markup
<AwTag text="Pending" icon="awesio/spinner" icon-class="animate-spin" color="warning" />
```

### With Custom Colors

```markup
<AwTag text="Success" color="success" />
<AwTag text="Warning" color="warning" />
```

### As Link

```markup
<AwTag text="Tag" tag="a" href="/tagged" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML tag to render | `String` | `false` | `'span'` |
| color | Background color | `String` | `false` | `'mono-100'` |
| onColor | Text/icon color | `String` | `false` | `''` |
| text | Tag text content | `String` | `true` | - |
| icon | Icon name | `String` | `false` | `null` |
| iconClass | CSS classes for icon | `String` / `Array` / `Object` | `false` | `null` |

### Slots

No slots are available for this component.

### Events

No events are emitted by this component.

## Component Behavior

### Color System

The component uses the AwesCode UI color system with automatic text color calculation:

**Background color:**
- Set via `color` prop (default: `'mono-100'`)
- Accepts any valid color from the color system
- Uses `toColor()` utility to convert color name to CSS variable

**Text/icon color:**
- Automatically calculated using `toOnColor()` for optimal contrast
- Can be overridden with `onColor` prop
- Ensures accessibility by using paired colors

**Custom colors:**
- Custom colors are detected via `isCustomColor()` utility
- Uses special overlay color for custom color backgrounds
- Ensures consistent appearance across themes

For a complete list of available colors, see [Built-in Colors](/reference/colors).

### Icon Display

Icons are displayed before the text when provided:
- Icon size is fixed at 16px
- Icon color matches the text color (calculated from background)
- Use `iconClass` prop to add custom CSS classes (e.g., `animate-spin` for loading states)

**Common icon use cases:**
```markup
<!-- Status with spinning icon -->
<AwTag text="Loading" icon="awesio/spinner" icon-class="animate-spin" />

<!-- Static status icon -->
<AwTag text="Complete" icon="awesio/check-circle" color="success" />
```

For a complete list of available icons, see [Built-in Icons](/reference/icons).

### HTML Tag Rendering

The component can render as any HTML element:
- Default: `<span>` - Inline element for text flow
- Link: `<a>` - Interactive link element
- Other: Any valid HTML tag name

**Example:**
```markup
<!-- As link -->
<AwTag text="View all" tag="a" href="/tags/featured" />

<!-- As div -->
<AwTag text="Block tag" tag="div" />
```

## Related Components

- `AwLabel` - Label component with similar functionality
- `AwBadge` - Badge component
- `AwTags` - Multiple tags component

## Notes

- **Import Method:** Global - Available as atom component
- Default background color is `mono-100`
- Text color is automatically calculated from background color if `onColor` not provided
- Supports custom colors via theme color system
- Icon is displayed before the text
- Can be rendered as any HTML tag (e.g., `a` for links)