Alert

Alert displays a message to the user. Bring your own icons and customize styling as needed.

Basic Usage

Code Example
Basic.vue
Alert
The main Alert component. All props are related to its type and appearance.
Alert Props  Type  Description 
outline
boolean
Adds an outline style to the alert.
dash
boolean
Adds a dashed outline to the alert.
soft
boolean
Adds a soft background to the alert.
type
string
Sets the alert type to one of the below props.
   
info
boolean
Shortcut for type="info".
   
success
boolean
Shortcut for type="success".
   
warning
boolean
Shortcut for type="warning".
   
error
boolean
Shortcut for type="error".
orientation
string
Sets the orientation of the alert to one of the below props.
   
vertical
boolean
Shortcut for orientation="vertical".
   
horizontal
boolean
Shortcut for orientation="horizontal".
Alert Slots  Description 
default
The default slot for Alert content. Place icons, text, buttons, etc. here.
Examples
Type
Alert's type conveys meaning through color.
 Code Example 
Type.vue
Close Button
You can supply your own close button to dismiss the alert.
infoLorem ipsum dolor sit amet, consectetur adip!
successLorem ipsum dolor sit amet, consectetur adip!
warningLorem ipsum dolor sit amet, consectetur adip!
errorLorem ipsum dolor sit amet, consectetur adip!
 Code Example 
Close.vue
Title and Description
Example with a title and description using Flex and Text.
 New message! 
 You have 1 unread message 
 Code Example 
TitleAndDescription.vue
DaisyUI Kit 🌼