Skip to content

Alert

A component used to display the contextual feedback in response to the user's actions.

Props

type
Type and at the same time the color of the alert
type:String
default:warning
values:warning, info, success, danger
dismiss
Alert removal button
type:Boolean
default:false
title
Alert title
type:String
default:''
toDetails
String or object being the routing address
type:String, Object
default:''
titleDetails
The title of the left link
type:String
default:''
toView
String or object being the routing address
type:String, Object
default:''
titleView
Right link title
type:String
default:''

Slots

default
Default slot for the content of the alert

Examples

Alert of good luck
Alert success title
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
html
<alert type="success" title="Alert succes title" dismiss> Text of success alert </alert>
Information alert without closing button
Alert info title
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
html
<alert type="success" title="Alert infotitle"> Text of info alert </alert>
Alert warnings with left button
Alert title
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
html
<alert type="success" title="Alert warning title" dismiss toDetails="/" titleDetails="Learn more">
  Text of warning alert
</alert>
Error alert with right button
Alert title
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
html
<alert type="success" title="Alert error title" dismiss toView="/" titleView="View details">
  Text of error alert
</alert>
Alert of good luck with the buttons
Alert success title
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers forever. This action cannot be undone.
html
<alert
  type="success"
  title="Alert success title"
  dismiss
  toView="/"
  titleView="View details"
  toDetails="/"
  titleDetails="Learn more"
>
  Are you sure you want to deactivate your account? All of your data will be permanently removed
  from our servers forever. This action cannot be undone.
</alert>