Alert API
This page provides an overview of the Alert component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Alert component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
modelValue | false | boolean | Controls the visibility of the alert. |
type | "success" | Type or undefined | Type of the alert message. |
position | "top" | PositionShort or undefined | Position of the alert on the screen. |
size | "2xl" | Size or undefined | Size of the alert. |
title | "" | string | The title of the alert. |
subtitle | "" | string | The subtitle of the alert. |
toTeleport | "body" | string | Selector for teleporting the alert to a specific container. |
class | "" | StyleClass | Custom CSS class for the alert. |
style | undefined | CSSProperties | Custom inline styles for the alert. |
displayTime | 0 | string or number or undefined | Duration for which the alert is displayed (in milliseconds). |
notAnimate | false | boolean | Disables animations for the alert. |
closeButton | false | boolean | Enables the close button for the alert. |
Emits
The Alert component emits the following events:
| Emit | Payload | Description |
|---|---|---|
update:modelValue | boolean | Emitted when the modelValue prop is updated. |
Slots
The Alert component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Slot for adding custom content inside the alert. |
Expose
The Alert component exposes the following methods and states via ref:
| Expose | Type | Description |
|---|---|---|
isVisible | boolean | Current visibility state of the alert. |
type | AlertProps["type"] | Current type of the alert. |
title | AlertProps["title"] | Current title of the alert. |
subtitle | AlertProps["subtitle"] | Current subtitle of the alert. |
displayTime | number | Current display duration of the alert (in milliseconds). |
isCloseButton | AlertProps["closeButton"] | Indicates if the close button is enabled. |
position | AlertProps["position"] | Current position of the alert. |
classesStyle | Record<"body" | "icon" | "title" | "subtitle" | "button" | "buttonIcon", StyleClass> | CSS classes for various parts of the alert. |
size | StyleClass | Current size of the alert. |
classBase | StyleClass | Base CSS class for the alert. |
close | () => void | Closes the alert. |
Types
Type
The type prop specifies the visual style and intent of the alert. It accepts the following values:
| Value | Description |
|---|---|
"success" | Represents a successful operation. Styled with green colors. |
"warning" | Represents a warning message. Styled with yellow or amber colors to indicate caution. |
"info" | Represents informational content. Styled with blue colors to provide neutral or helpful details. |
"error" | Represents an error or critical issue. Styled with red colors to signify a problem. |
"neutral" | Represents a neutral message. Styled with gray or neutral tones for general-purpose alerts. |
Size
The size prop accepts the following values to define the width of the dialog:
xs, sm, md, lg, xl, 2xl (default), 3xl, 4xl, 5xl, 6xl, 7xl
PositionShort
The PositionShort type defines the relative position of the alert on the screen:
| Value | Description |
|---|---|
"center" | Centers the alert on the screen. |
"top" | Positions the alert at the top of the screen. |
"bottom" | Positions the alert at the bottom of the screen. |
"left" | Positions the alert on the left side of the screen. |
"right" | Positions the alert on the right side of the screen. |
"bottom-left" | Positions the alert at the bottom-left corner. |
"top-left" | Positions the alert at the top-left corner. |
"bottom-right" | Positions the alert at the bottom-right corner. |
"top-right" | Positions the alert at the top-right corner. |