Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

import {BaseAlert} from '@/components'

Global usage

Vue.component(BaseAlert.name, BaseAlert)

For local usage

export default {
  components: {
    BaseAlert
  }
}

Examples

<div>
    <base-alert type="primary">
        <strong>Primary!</strong> This is a primary 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!
    </div>

    <base-alert type="warning">
        <strong>Warning!</strong> This is a warning alert—check it out!
    </base-alert>
    <base-alert type="default">
            <strong>Default!</strong> This is a warning alert—check it out!
    </base-alert>
</div>
Show Code

Dismissing

<div>
 <base-alert type="primary" dismissible>
         <strong>Primary!</strong> This is a primary alert—check it out!
     </base-alert>
 
     <base-alert type="info" dismissible>
         <strong>Info!</strong> This is a info alert—check it out!
     </base-alert>
 
     <base-alert type="success" dismissible>
         <strong>Success!</strong> This is a success alert—check it out!
     </base-alert>
 
     <base-alert type="danger" dismissible>
         <strong>Danger!</strong> This is a danger alert—check it out!
     </div>
 
     <base-alert type="warning" dismissible>
         <strong>Warning!</strong> This is a warning alert—check it out!
     </base-alert>
     <base-alert type="default" dismissible>
             <strong>Default!</strong> This is a warning alert—check it out!
     </base-alert>
</div>
Show Code

Props

← Badge →