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

# Link

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

The `AwLink` component is a flexible link component that supports routing, external links, and custom styling.

## Overview

`AwLink` provides a link component that automatically handles routing (via Vue Router) for internal links and regular anchor tags for external links. It extends the link mixin for consistent link behavior across the library.

## Usage

### Basic Example

```markup
<AwLink href="/page">Go to Page</AwLink>
```

### External Link

```markup
<AwLink href="https://example.com">External Link</AwLink>
```

### With Router Object

```markup
<AwLink :href="{ name: 'page', params: { id: 1 } }">Router Link</AwLink>
```

### With Custom Color

```markup
<AwLink href="/page" color="accent">Colored Link</AwLink>
```

### Reset Styling

```markup
<AwLink href="/page" reset>Unstyled Link</AwLink>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| href | Link destination (string or router object) | `String` / `Object` | `false` | `''` |
| back | Enable back button behavior | `Boolean` | `false` | `false` |
| className | CSS class name | `String` | `false` | From config |
| text | Link text content | `String` | `false` | - |
| color | Link color - see [Built-in Colors](/reference/colors) | `String` | `false` | `null` |
| reset | Remove default link styling | `Boolean` | `false` | `false` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Link content | - | Text prop value |

### Events

All standard link events are supported (e.g., `click`).

### Config Options

The component uses default configuration from `@AwConfig`:

```javascript
export default {
  AwLink: {
    routerComponent: 'router-link',
    baseClass: 'link'
  }
}
```

## Component Behavior

### Link Type Detection
- **Internal links:** Uses router component (default: `router-link`) when no protocol detected
- **External links:** Uses `<a>` tag when URL starts with `http://` or `https://`
- Detection handled by linkMixin

### Routing
- **href prop:** Accepts string URL or router object
- **String href:** Direct URL path (e.g., `/page` or `https://example.com`)
- **Object href:** Vue Router location descriptor
  - Named routes: `{ name: 'routeName' }`
  - Path with params: `{ path: '/path', query: { ... } }`
  - All Vue Router location options supported
- **Internal conversion:** `href` is converted to `to` prop when rendering NuxtLink/router-link

### Component Rendering
- Uses dynamic component (`:is="_linkComponent"`)
- Component type determined by linkMixin based on URL
- Router component configurable via `_config.routerComponent`

### Styling System
- **Default:** Uses `baseClass` from config (`link`)
- **With color:** Sets `--btn-color` CSS variable via `colorStyle`
- **With reset:** Removes all default classes when `reset={true}`
- **Custom className:** Can override default class via `className` prop

### Color Handling
- Color prop uses `toColor` utility for conversion
- Sets CSS custom property `--btn-color`
- Supports all color names (semantic, mono, named)
- Color is optional (default: null)

### Content
- **Default slot:** Primary way to add content
- **Text prop:** Alternative to slot for simple text
- **Slot takes precedence:** If slot has content, text prop ignored

### Structure
```
<component :is="router-link | a" :class="className" :style="colorStyle">
  <slot>{{ text }}</slot>
</component>
```

## Related Components

- `AwButton` - Button component that extends AwLink
- `AwActionButton` - Action button component

## Notes

- **Import Method:** Global - Available as atom component
- Extends `linkMixin` for consistent link behavior
- Automatically uses `router-link` for internal links and `<a>` for external links
- External links are detected by protocol (http://, https://)
- Only `href` prop is used - it accepts both strings and router objects
- Internally converts `href` to `to` when rendering router-link component
- `back` prop enables special back button behavior with router
- Color prop sets CSS custom property `--btn-color` for link color
- Reset prop removes default link styling completely
- All standard link events supported via `$listeners`
- Component type (router-link vs a vs button) determined automatically at runtime
- Config allows customizing router component name
- Renders as `<button>` when no href provided or when disabled