# Alert

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

import {Alert} from 'src/components'
1

Global usage

Vue.component(Alert)
1

For local usage

export default {
  components: {
    Alert
  }
}
1
2
3
4
5

# Sample alerts

Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual type props (e.g., type="success").

<template>
  <div>
    <alert type="primary">This is a primary alert—check it out!</alert>
    <alert type="success">This is a success alert—check it out!</alert>
    <alert type="info">This is a info alert—check it out!</alert>
    <alert type="warning">This is a warning alert—check it out!</alert>
    <alert type="danger">This is a danger alert—check it out!</alert>
  </div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

Use the .alert-link utility class to quickly provide matching colored links within any alert.

<template>
  <div>
    <alert type="primary">This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</alert>
    <alert type="success">This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</alert>
    <alert type="info">This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</alert>
    <alert type="warning">This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</alert>
    <alert type="danger">This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</alert>
  </div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# Dismissing

You can dismiss alerts, by providing a dismissible prop. When clicking the X icon, the alert will disappear.

<template>
  <div>
      <alert type="success" dismissible>
        <div class="alert-icon">
              <i class="now-ui-icons ui-2_like"></i>
            </div>
            <strong>Well done!</strong> You successfully read this important alert message.
      </alert>
  </div>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Slots

Name Description
default Default content for the alert
dismiss-icon Content to replace default dismiss icon

← Badge →