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

# Description

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

The `AwDescription` component is a simple text wrapper for description/helper text with consistent styling.

## Overview

`AwDescription` provides a semantic wrapper for description text that can be used throughout the UI. It uses a configurable HTML tag (default: `span`) and applies consistent styling.

## Usage

### Basic Example

```markup
<AwDescription>This is a description text</AwDescription>
```

### With Custom Tag

```markup
<AwDescription tag="div">Block-level description</AwDescription>
```

### In Forms

```markup
<AwInput label="Email" />
<AwDescription tag="div" class="mt-1">
    Enter your email address
</AwDescription>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| tag | HTML tag to render | `String` | `false` | `'span'` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Description text content | - | - |

### Events

No events are emitted by this component.

### Config Options

The component uses default configuration from `@AwConfig`:

```javascript
export default {
  AwDescription: {
    tag: 'span'
  }
}
```

## Related Components

- `AwInput` - Input component that may use descriptions
- `AwCard` - Card component that uses descriptions
- `AwLabel` - Label component

## Notes

- **Import Method:** Global - Available as atom component
- Default tag is `span` (inline), use `tag="div"` for block-level descriptions
- Commonly used for helper text, form field descriptions, and card descriptions