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

# Dropdown Button

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

The `AwDropdownButton` component is a button designed for use inside dropdown menus.

## Overview

`AwDropdownButton` provides a styled button component that extends `AwLink` for use in dropdown menus. It supports routing, external links, icons, and active states.

## Usage

### Basic Example

```markup
<AwDropdown>
    <AwDropdownButton text="Option 1" href="/option1" />
    <AwDropdownButton text="Option 2" href="/option2" />
</AwDropdown>
```

### With Icon

```markup
<AwDropdownButton text="Edit" icon="edit" href="/edit" />
```

### Active State

```markup
<AwDropdownButton 
    text="Current Page" 
    href="/current"
    :active="true"
/>
```

### Error Color

```markup
<AwDropdownButton 
    text="Delete" 
    color="error"
    href="/delete"
/>
```

## API

### Props

| Name | Description | Type | Required | Default | Validator |
|------|-------------|------|----------|---------|-----------|
| color | Button color variant | `String` | `false` | `'default'` | Must be: default, error |
| active | Sets active state class | `Boolean` | `false` | `false` | - |
| icon | Icon name | `String` | `false` | `''` | - |
| iconSize | Icon size in pixels | `String` / `Number` | `false` | `'16'` | - |

All props from `AwLink` are also supported (e.g., `href`, `to`, `text`).

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Button content | - | Text prop value |
| icon | Custom icon content | - | Default icon |

### Events

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

## Related Components

- `AwDropdown` - Dropdown container component
- `AwLink` - Base link component
- `AwButton` - Standard button component

## Notes

- **Import Method:** Global - Available as atom component
- Extends `AwLink` for routing and link functionality
- Designed specifically for use in dropdown menus
- Supports active state for indicating current selection
- Error color variant available for destructive actions