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

# Banner Text

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

The `AwBannerText` component displays a banner with icon/image, title, and description text.

## Overview

`AwBannerText` provides a structured banner layout with an icon or image, title with arrow indicator, and description text. It's useful for informational banners and callouts.

## Usage

### Basic Example

```markup
<AwBannerText
    icon="awesio/info-circle"
    title="Banner Title"
    description="Banner description text"
/>
```

### With Custom Icon Colors

Use semantic colors for icon customization:

```markup
<AwBannerText
    icon="awesio/check-circle"
    icon-color="success"
    title="Success Banner"
    description="Operation completed successfully."
/>

<AwBannerText
    icon="awesio/warning"
    icon-color="warning"
    title="Warning Banner"
    description="Please review carefully."
/>
```

### Rounded Icon Container

Control the icon container appearance:

```markup
<AwBannerText
    icon="awesio/star"
    icon-color="accent"
    title="Rounded Container"
    description="Icon with rounded container styling."
    rounded
/>
```

### Hide Title Arrow

```markup
<AwBannerText
    icon="awesio/bell"
    title="No Arrow"
    description="Banner without title arrow indicator."
    :title-arrow="false"
/>
```

### With Custom Content

```markup
<AwBannerText icon="awesio/gift" icon-color="accent">
    <template #title>
        <AwFlow :gap="1">
            <span>Custom Title</span>
            <AwBadge text="New" color="warning" />
        </AwFlow>
    </template>
    Custom description content here.
</AwBannerText>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| src | Image source URL | `String` | `false` | `''` |
| icon | Icon name (when not using image) | `String` | `false` | `''` |
| iconColor | Icon color | `String` | `false` | `''` |
| title | Banner title | `String` | `false` | `''` |
| description | Banner description | `String` | `false` | `''` |
| rounded | Apply rounded styling to icon container | `Boolean` | `false` | `false` |
| titleArrow | Show arrow indicator next to title | `Boolean` | `false` | `true` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom description content | - | Description text |
| icon | Custom icon content | - | Icon or image |
| title | Custom title content | - | Title text |

### Events

No events are emitted by this component.

## Related Components

- `AwAlert` - Alert component
- `AwCard` - Card component
- `AwIcon` - Icon component

## Component Behavior

### Icon Container Styling

- **Default**: Square icon container (without rounded corners)
- **Rounded**: Set `rounded` prop to apply rounded container styling
- When `src` prop is provided, displays image instead of icon
- Icon color can be customized with `iconColor` prop using semantic colors

### Title Arrow Indicator

- Title includes an arrow indicator by default
- Use `:title-arrow="false"` to hide the arrow
- Arrow is rendered using `AwIconSystemMono` component

### Slot Usage

- **Icon slot**: Replace default icon/image with custom content
- **Title slot**: Customize title content (arrow still renders if `titleArrow` is true)
- **Default slot**: Custom description content replaces the `description` prop

## Related Components

- `AwAlert` - Alert component for notifications
- `AwCard` - Card component for containers
- `AwIcon` - Icon component
- `AwBadge` - Badge component for status indicators

## Notes

- **Import Method:** Global - Available as molecule component
- Use built-in icon names with `awesio/` prefix (e.g., `awesio/bell`, `awesio/check-circle`)
- Icon colors support semantic values: `success`, `warning`, `error`, `info`, `accent`
- Useful for informational banners, callouts, and featured content sections