VsudAlert

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

Demo

Success! This is a primary alert—check it out!

<template>
  <vsud-alert>
    <strong>Primary!</strong> This is a primary alert—check it out!
  </vsud-alert>
</template>

<script>
  import VsudAlert from "@/components/VsudAlert.vue";

  export default {
    components: {
      VsudAlert,
    },
  };
</script>

1<template>
2  <vsud-alert>
3    <strong>Primary!</strong> This is a primary alert—check it out!
4  </vsud-alert>
5</template>
6
7<script>
8  import VsudAlert from "@/components/VsudAlert.vue";
9
10  export default {
11    components: {
12      VsudAlert,
13    },
14  };
15</script>

Props Information

Name	Type	Default	Description
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `VsudAlert` background color.
icon	String		used to set `icon` to the `VsudAlert`.
dismissible	bool	false	If `true` the `VsudAlert` will have a closing button for dismissing it.
slot	node		The `VsudAlert` has a default slot that you can pass node or content inside it.

With Icon

Info! This is an alert with Icon!

<template>
  <vsud-alert color="info" icon="ni ni-like-2 ni-lg">
    <strong>Primary!</strong> This is an alert with Icon!
  </vsud-alert>
</template>

<script>
import VsudAlert from "@/components/VsudAlert.vue";

export default {
  components: {
    VsudAlert,
  },
  };
</script>

1<template>
2  <vsud-alert color="info" icon="ni ni-like-2 ni-lg">
3    <strong>Primary!</strong> This is an alert with Icon!
4  </vsud-alert>
5</template>
6
7<script>
8import VsudAlert from "@/components/VsudAlert.vue";
9
10export default {
11  components: {
12    VsudAlert,
13  },
14  };
15</script>

Dismissible

Dark! This is a dismissible alert!

<template>
  <vsud-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
    <strong>Dark!</strong> This is a dismissible alert!
  </vsud-alert>  
</template>

<script>
  import VsudAlert from "@/components/VsudAlert.vue";

  export default {
    components: {
      VsudAlert
    },
  }
</script>

1<template>
2  <vsud-alert color="dark" icon="ni ni-like-2 ni-lg" dismissible>
3    <strong>Dark!</strong> This is a dismissible alert!
4  </vsud-alert>  
5</template>
6
7<script>
8  import VsudAlert from "@/components/VsudAlert.vue";
9
10  export default {
11    components: {
12      VsudAlert
13    },
14  }
15</script>