Alert

The Alert component is used to convey important feedback information to users, such as successful operations, system warnings, or error messages.

Basic Usage

Use the type prop to define the semantic level of the alert. The component will automatically select the most suitable Tabler icon and color scheme.

<TAlert type="success" description="Data saved successfully!"/>
<TAlert type="info" description="You have a new system notification."/>
<TAlert type="warning" description="Please note that this operation may affect your account data."/>
<TAlert type="danger" description="A network error occurred. Please try again later."/>

Icon and Title

When you need to convey richer information, you can use the icon and title props to build a more structured alert.

The description text will automatically turn to a secondary gray color to highlight the title hierarchy.

<TAlert type="success" title="Payment Successful" :icon="IconClipboardTypography">
  Your order has been paid successfully. We will arrange shipment as soon as possible.
</TAlert>
<TAlert type="danger" title="Account Frozen" :icon="IconShieldHalfFilled">
  Suspicious login activity detected. Please contact customer service to unfreeze.
</TAlert>

Important Style

Enable the important prop to give the alert more visual weight.

It typically applies a solid background or a thicker side border, depending on its color type.

This is ideal for critical warnings that users absolutely cannot miss.

<TAlert important type="primary" title="System Upgrade Notice">
  The system will undergo maintenance at 12:00 PM tonight, expected to last 2 hours.
</TAlert>
<TAlert important type="danger" title="Critical Error">
  Database connection failed. Please check the server status immediately!
</TAlert>

Custom Icon

While the component auto-derives icons, you can pass a custom Tabler icon via the icon prop, or hide it entirely with showIcon="false".

<TAlert type="warning" :icon="IconFlame" title="Hot Warning" description="..."/>
<TAlert type="success" :showIcon="false" description="A minimal alert without any icon."/>

Nesting Components (Using Slots)

Since the icon area is exposed as the #icon slot, you can insert not only SVG icons but also any other Vue component.

For example, combining it with the TAvatar component, you can easily build a user message or system dialog with strong visual cues:

<TAlert color="blue" :closable="false">
  <template #icon>
    <TAvatar src="/avatar.png"></TAvatar>
  </template>
  Phone: "您拨打的号码是空号，请核对后再拨。"<br/>
  Outside: "Son, why do you speak a foreign language every day? Mom can't understand, but Mom misses you so much…….."
</TAlert>

Closable Alert

The closable prop is enabled by default, displaying a close button on the right side.

You can listen to the @close event to handle your own business logic.

View Code

<script setup lang="ts">
  import {ref} from "vue";
  import {TAlert, TButton, TButtonGroup} from '@gulcc/tabler-vue';

  const isClosable = ref(true);
  const isClose = ref(true);
</script>
<template>
  <TButtonGroup v-if="isClose">
    <TButton @click="isClosable=true">Allow Close</TButton>
    <TButton @click="isClosable=false">Disable Close</TButton>
  </TButtonGroup>
  <br><br>
  <TAlert type="info" title="Close Event" :closable="isClosable" @close="isClose.value = false">
    When you close this alert, the action buttons above will also disappear.
  </TAlert>
</template>

API

TAlert Props

Prop	Description	Type	Default
type	The status type of the alert, automatically maps color and default icon.	'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'	'info'
title	The title content of the alert.	string	undefined
description	The description content of the alert (overridden by the default slot).	string	undefined
icon	Custom left icon Vue component instance.	Icon	undefined
showIcon	Whether to show the left icon.	boolean	true
color	Force a specific alert color (takes priority over type).	TablerColor	undefined
important	Enable high-saturation solid color emphasis style.	boolean	false
closable	Whether to show the close button and allow manual dismissal.	boolean	true

TAlert Events

Event	Description	Callback
close	Emitted when the user clicks the close button and the alert disappears.	() => void

TAlert Slots

Slot	Description
default	The description content of the alert (overrides the description prop).
title	Custom title (overrides the title prop).
icon	Custom icon (overrides the icon prop).