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

# Action Button

**Category:** Molecule | **Import:** Global

The `AwActionButton` component is a button-like component with icon, text, and optional descriptions, designed for action cards and lists.

## Overview

`AwActionButton` provides a styled action button with a leading icon, main text, optional description and subdescription, and a trailing icon. It extends link functionality and is commonly used in action cards.

## Usage

### Basic Example

```markup
<AwActionButton text="Action" icon="arrow-animated" />
```

### With Descriptions

```markup
<AwActionButton
    text="Create Project"
    description="Start a new project"
    subdescription="Free plan"
    icon="awesio/plus"
/>
```

### With Custom Icon Colors

```markup
<AwActionButton
    text="Action"
    icon="awesio/check"
    icon-color="success"
/>
```

### As Links

```markup
<!-- External link -->
<AwActionButton
    text="External Link"
    icon="awesio/external"
    href="https://example.com"
    target="_blank"
/>

<!-- Internal link (uses router automatically) -->
<AwActionButton
    text="Internal Link"
    icon="awesio/link"
    href="/components"
/>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| icon | Leading icon name | `String` | `false` | `''` |
| iconColor | Leading icon background color | `String` | `false` | `'green'` |
| iconOnColor | Leading icon text color | `String` | `false` | `null` |
| iconSize | Leading icon size | `String` | `false` | `'md'` |
| text | Button text | `String` | `false` | `''` |
| description | Description text below main text | `String` | `false` | `''` |
| subdescription | Subdescription text | `String` | `false` | `''` |
| iconRight | Trailing icon name | `String` | `false` | `'arrow-animated'` |
| modifiers | CSS modifiers (e.g., 'outline', 'narrow') | `String` / `Array` | `false` | `''` |
| href | Link URL (for both internal and external links) | `String` | `false` | `undefined` |
| target | Link target (e.g., `_blank` for external links) | `String` | `false` | `undefined` |

**Link Behavior:**
- Uses `href` prop for all links (both internal and external)
- Internal links (starting with `/`) automatically use Vue Router
- External links work with standard `<a>` tag behavior
- No need to use `to` prop - the link mixin handles routing automatically

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom text content | `{ text }` | Text prop value |
| icon-wrapper | Custom icon wrapper | - | Default icon wrapper |

### Events

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

## Related Components

- `AwActionCard` - Card component that uses action buttons
- `AwActionIcon` - Icon component used in action buttons
- `AwButton` - Standard button component

## Component Behavior

### Link Functionality

The component extends the link mixin, providing intelligent link handling:

- **Internal Navigation:** Links starting with `/` automatically use Vue Router for SPA navigation
- **External Links:** Full URLs (starting with `http://` or `https://`) render as standard `<a>` tags
- **Prop Usage:** Only use `href` prop - avoid using `to` prop as the link mixin handles routing
- **Target Control:** Use `target="_blank"` for external links to open in new tabs

### Icon Customization

- **Leading Icon:** Customize with `icon`, `iconColor`, `iconOnColor`, and `iconSize` props
- **Trailing Icon:** Defaults to `arrow-animated`, can be customized with `iconRight` prop
- **Animated Icons:** Automatically detected and styled (e.g., `arrow-animated`)

### Visual Modifiers

Available modifiers for different styles:
- `outline` - Outlined button style
- `narrow` - Reduced padding for compact layouts
- Multiple modifiers can be combined using an array: `:modifiers="['outline', 'narrow']"`

## Notes

- **Import Method:** Global - Available as molecule component
- Commonly used within `AwActionCard` components
- Description and subdescription provide context for actions
- Default icon color is `green` with customizable background and text colors