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

# Alert

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

The `AwAlert` component displays alert messages with icon, title, description, and optional action links.

## Overview

`AwAlert` provides a styled alert component for displaying informational, warning, or error messages. It supports custom colors, icons, and action links.

## Usage

**Important:** AwAlert components should be placed inside components with "surface" backgrounds (e.g., `AwCard`, `AwModal`, `AwIsland`) for proper visual presentation.

### Basic Example

```markup
<AwCard>
    <AwAlert
        title="Basic Alert"
        description="This is a basic alert message."
    />
</AwCard>
```

### With Icons and Semantic Colors

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

    <AwAlert
        title="Warning"
        description="Please review this carefully."
        icon="awesio/warning"
        color="warning"
    />

    <AwAlert
        title="Error"
        description="Something went wrong."
        icon="awesio/close-circle"
        color="error"
    />
</AwCard>
```

### With Custom Icon Color

```markup
<AwCard>
    <AwAlert
        title="Custom Icon Color"
        description="Alert with custom icon color."
        icon="awesio/star"
        icon-color="warning"
    />
</AwCard>
```

### With Action Links

```markup
<AwCard>
    <AwAlert
        title="Confirm Action"
        description="Are you sure you want to proceed?"
        icon="awesio/question-circle"
        color="warning"
    >
        <AwLink>Confirm</AwLink>
        <AwLink>Cancel</AwLink>
    </AwAlert>
</AwCard>
```

### With Custom Colors

```markup
<AwCard>
    <AwAlert
        title="Blue Theme"
        description="Alert with blue color."
        icon="awesio/star"
        color="blue"
    />

    <AwAlert
        title="Magenta Theme for Icon"
        description="Alert with magenta icon color."
        icon="awesio/question-circle"
        icon-color="on-magenta"
    />
</AwCard>
```

### Closable Alert

```markup
<AwCard>
    <AwAlert
        v-if="closableVisible"
        title="Closable Alert"
        description="Click the close icon to hide this alert."
        icon="awesio/info-circle"
        config="info"
        @close="onClosableClose"
    />

    <AwButton v-else @click="restoreClosable">
        Restore alert
    </AwButton>
</AwCard>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| icon | Icon name | `String` | `false` | `''` |
| config | Alert background color and icon | `String` | `false` | `'default'` |
| color | Alert background color | `String` | `false` | `''` |
| onColor | Alert icon and text color | `String` | `false` | `''` |
| iconColor | Icon color | `String` | `false` | `''` |
| title | Alert title text | `String` | `false` | `''` |
| description | Alert description text | `String` | `false` | `''` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Action links | - | - |
| icon | Custom icon content | - | Default icon |
| title | Custom title content | - | Title text |
| description | Custom description content | - | Description text |
| close | Close icon or button | - | - |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| close | `void` | Emitted when the built-in close button is clicked or a custom close control calls `$emit('close')`. |

## Component Behavior

### Color System

The alert component supports both semantic and custom colors:

**Semantic Colors:**
- `info` - Informational messages (blue theme)
- `success` - Successful operations (green theme)
- `warning` - Cautionary messages (yellow/orange theme)
- `error` - Error messages (red theme)
- `notify` - Notification alerts (notification theme)
- `accent` - Primary brand color

**Custom Colors:**
Any named color from the design system can be used:
- `blue`, `purple`, `magenta`, `red`, `green`, etc.
- Named colors display with light/pastel backgrounds
- Use `icon-color` with `on-{color}` for vibrant icon colors on custom backgrounds

### Icon Colors

The `iconColor` prop accepts:
- **Semantic colors**: `success`, `warning`, `error`, `info`, `accent` (use without `on-` prefix)
- **Named colors with OnColor variants**: `on-magenta`, `on-purple`, `on-blue`, etc. (use `on-` prefix for vibrant colors on light backgrounds)

**Important:** Semantic colors should be used directly without the `on-` prefix (e.g., `icon-color="accent"`), while named colors require the `on-` prefix to get vibrant colors on light backgrounds (e.g., `icon-color="on-magenta"`).

### Layout Requirements

- **Surface background required**: Alerts must be placed inside components with white/surface backgrounds
  - Compatible containers: `AwCard`, `AwModal`, `AwIsland`, or any component with surface color
  - The surface background provides proper contrast for alert colors
- Multiple alerts can be stacked within a single container using `AwGrid`
- Action links render in a separate section below title/description

### Close Behavior

- The **recommended** way to handle dismissible alerts is to listen to the `close` event with `@close="handler"` and toggle visibility in your state.
- When a `close` listener is present, `AwAlert` renders a built-in icon button in the close area that emits the `close` event.
- For advanced customization of the close control (e.g., different icon or text), use the `close` slot and emit the `close` event from your custom content.

## Related Components

- `AwCard` - Required container for alerts
- `AwIcon` - Icon component used within alerts
- `AwLink` - Link component for alert actions
- `AwBadge` - Alternative for status indicators

## Notes

- **Import Method:** Global - Available as molecule component
- **Container Required:** Always wrap alerts in `AwCard` for proper styling
- Default color is `'default'` (neutral gray theme)
- Title and description are both optional but at least one should be provided
- Icon appears before the title when provided
- Action links use the default slot and appear below content
- Supports both semantic colors (info, success, warning, error) and custom named colors
- Use `icon-color` to customize icon independently from alert background