---
title: Alert
description: An inline banner that displays a contextual status message.
category: Feedback
status: beta
since: 0.3.4
tags: [alert, feedback, status]
syncStatus: reviewed
verified: true
---

## Usage

### Types
`type` sets the color and the default icon.
:::TuffDemoWrapper{demo="AlertAlertVariantsDemo" code-lang="vue"}
---
code: |
  <template>
    <TxAlert title="Heads up" message="Check your configuration." type="info" />
    <TxAlert title="Success" message="Saved successfully." type="success" />
    <TxAlert title="Warning" message="Something needs your attention." type="warning" />
    <TxAlert title="Error" message="Save failed." type="error" />
  </template>
---
:::

### Persistent Notice
Set `closable=false` when the message is page state and must not be dismissed.

```vue
<template>
  <TxAlert
    type="warning"
    title="Manual review required"
    message="This release contains unsigned artifacts."
    :closable="false"
  />
</template>
```

### Rich Title and Body

```vue
<template>
  <TxAlert type="success" @close="dismissed = true">
    <template #title>
      Runtime evidence collected
    </template>

    <p>
      Preview checks passed. Open the evidence panel for screenshots and traces.
    </p>
  </TxAlert>
</template>
```

### Text Only

```vue
<template>
  <TxAlert :show-icon="false" message="Local-only demo data is shown on this page." />
</template>
```

### Best Practices

- Use an alert for contextual page feedback; use a toast for a transient action result.
- Match `type` to the user impact: `error` for failed actions, `warning` for risk, `info` for neutral guidance.
- Set `closable=false` for compliance, blocking, or always-relevant notices; persist dismissal in `close` when it must stick.
- Keep copy short and actionable, and don't mount several new alerts at once.
- Place action buttons after the alert, not inside its body.

## API Reference

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `type` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Semantic intent; sets the color and default icon. |
| `title` | `string` | - | Title; the title row is skipped when neither it nor the `title` slot is set. |
| `message` | `string` | - | Body text; the default slot takes precedence. |
| `closable` | `boolean` | `true` | Shows the close button. |
| `showIcon` | `boolean` | `true` | Shows the leading semantic icon. |

### Events

| Event | Payload | Description |
|------|---------|-------------|
| `close` | - | Fires when the close button is clicked. |

### Slots

| Slot | Props | Description |
|------|------|-------------|
| `title` | - | Custom title content. |
| `default` | - | Custom body content; replaces `message`. |

### Exposed Methods

| Name | Type | Description |
|------|------|-------------|
| `open` | `() => void` | Shows a dismissed alert again. |
| `close` | `() => void` | Hides the alert and emits `close`. |

## Overview

- The root has `role="alert"`, so screen readers announce it as soon as it mounts.
- The `type` icons are `info`, `check-circle`, `alert-triangle`, and `x-circle`, all `TxIcon` built-ins that need no icon font.
- Clicking the close button hides the alert and emits `close`; a host can still drive it with `v-if`.
- Only opacity and transform animate; height does not collapse. Wrap a stack in `<TransitionGroup>` to close the gap.
- Under reduced motion, the alert only fades, without moving.
- The close button is icon-only and carries `aria-label="Close"`.

## Technologies

- The root carries `tx-alert--<type>` and `tx-alert--closable` and sits in `<Transition name="tx-alert" appear>`; fallthrough attributes land on `.tx-alert`.
- Source: `packages/tuffex/packages/components/src/alert/`.

<TuffDocSourceLink />