Vue Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible Bootstrap alerts.
Examples
Default! This is a default alert—check it out!
Primary! This is a primary alert—check it out!
Secondary! This is a secondary alert—check it
out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it out!
Danger! This is a danger alert—check it out!
Warning! This is a warning alert—check it out!
Copy
<base-alert type="default">
<strong>Default!</strong> This is a default alert—check it out!
</base-alert>
<base-alert type="primary">
<strong>Primary!</strong> This is a primary alert—check it out!
</base-alert>
<base-alert type="secondary">
<strong>Secondary!</strong> This is a secondary alert—check it out!
</base-alert>
<base-alert type="info">
<strong>Info!</strong> This is a info alert—check it out!
</base-alert>
<base-alert type="success">
<strong>Success!</strong> This is a success alert—check it out!
</base-alert>
<base-alert type="danger">
<strong>Danger!</strong> This is a danger alert—check it out!
</base-alert>
<base-alert type="warning">
<strong>Warning!</strong> This is a warning alert—check it out!
</base-alert>
With icon
Warning! This is a warning alert—check it out
that has an icon too!
Copy
<base-alert type="warning">
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>Warning!</strong> This is a warning alert—check it out that has an icon too!</span>
</base-alert>Dismissing
Default! This is a default alert—check it
out!
Primary! This is a primary alert—check it
out!
Secondary! This is a secondary alert—check it
out!
Info! This is a info alert—check it out!
Success! This is a success alert—check it
out!
Danger! This is a danger alert—check it
out!
Warning! This is a warning alert—check it
out!
Copy
<base-alert type="default" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>default!</strong> This is a default alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="primary" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>primary!</strong> This is a primary alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="secondary" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>secondary!</strong> This is a secondary alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="info" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>info!</strong> This is a info alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="success" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>success!</strong> This is a success alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="danger" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>danger!</strong> This is a danger alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>
<base-alert type="warning" dismissible>
<span class="alert-inner--icon"><i class="ni ni-like-2"></i></span>
<span class="alert-inner--text"><strong>warning!</strong> This is a warning alert—check it out!</span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</base-alert>