Alert | Tuff Docs

Usage

Types

type sets the color and the default icon.

Loading demo...

Persistent Notice

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

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

Rich Title and Body

<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

<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/.

查看源码

packages/tuffex/packages/components/src/alert/index.ts