diff --git a/components/alerte.vue b/components/alerte.vue
new file mode 100644
index 0000000000000000000000000000000000000000..79d1e26baa1869c1260f6af30d37d5bf990488cc
--- /dev/null
+++ b/components/alerte.vue
@@ -0,0 +1,42 @@
+<template>
+	<div class="alert" :class="classType" v-if="error">
+		{{ error }}
+		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
+			<span aria-hidden="true">&times;</span>
+		</button>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		type: {
+			type: String,
+			required: true,
+			validator: function (value) {
+				return (
+					[
+						"primary",
+						"secondary",
+						"success",
+						"danger",
+						"warning",
+						"info",
+						"light",
+						"dark"
+					].indexOf(value) !== -1
+				)
+			}
+		},
+		error: {
+			type: String,
+			default: null
+		}
+	},
+	computed: {
+		classType() {
+			return "alert-" + this.type
+		}
+	}
+}
+</script>
diff --git a/pages/favoris.vue b/pages/favoris.vue
index e6d8632c18ebbd0cf49e11da7681651c8ea2a3cd..b1d8f6be3fc4e59bb93e9825551033049dc4cce8 100644
--- a/pages/favoris.vue
+++ b/pages/favoris.vue
@@ -7,7 +7,7 @@
 		<div class="row">
 			<div class="col">
 				<transition name="fade">
-					<div class="alert alert-danger" v-if="error">{{ error }}</div>
+					<Alerte type="danger" :error="error" />
 				</transition>
 				<transition name="fade">
 					<div
diff --git a/pages/index.vue b/pages/index.vue
index 124b9c1769643a9a316b16c8a8a2ddaf402b7999..e57d6417e96193701385f71cb0ea27aef9e66605 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("inout") }}</h2>
 		<NavigationLoader :isLoading="$apollo.queries.newMembers.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="result" v-if="newMembers">
diff --git a/pages/membre.vue b/pages/membre.vue
index a3cdb42692a104aaf7785179e3b2f29e55bafac9..72cae00b73385ce340c7dea3ad011a0962f04492 100644
--- a/pages/membre.vue
+++ b/pages/membre.vue
@@ -2,7 +2,7 @@
 	<main>
 		<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div v-if="idFromHash && !$apollo.queries.idFromHash.loading">
diff --git a/pages/membres/index.vue b/pages/membres/index.vue
index a235a84ca4b01a5a3bcb24d01cd542b6e67d5b3b..1ef92494d06fc12ae4467d3c9ba7ba1bcbd363f7 100644
--- a/pages/membres/index.vue
+++ b/pages/membres/index.vue
@@ -11,7 +11,7 @@
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div
diff --git a/pages/parametres.vue b/pages/parametres.vue
index 48614c7e8da09c33efc0d48fe9614dd212940b4f..48cc61aa2239c49aeb505391ebb696232e251129 100644
--- a/pages/parametres.vue
+++ b/pages/parametres.vue
@@ -3,7 +3,7 @@
 		<h2 class="text-center my-5 font-weight-light">{{ $t("params.title") }}</h2>
 		<NavigationLoader :isLoading="$apollo.queries.allParameters.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="table-responsive" v-if="allParameters">
diff --git a/pages/previsions/futures_sorties.vue b/pages/previsions/futures_sorties.vue
index 349c492ab7a6dfee3d662059b6408d2db5599619..91a4af88f3115261a00137f136115d6b4cf16ef5 100644
--- a/pages/previsions/futures_sorties.vue
+++ b/pages/previsions/futures_sorties.vue
@@ -13,9 +13,7 @@
 		</div>
 		<NavigationLoader :isLoading="$apollo.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error && !$apollo.loading">
-				{{ error }}
-			</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div class="row" v-if="!$apollo.loading">
diff --git a/pages/previsions/index.vue b/pages/previsions/index.vue
index a988c72aced41d128ae043feee6234586be5859f..b7babb1db4e0f779a360139272dbfc2d305ff719 100644
--- a/pages/previsions/index.vue
+++ b/pages/previsions/index.vue
@@ -2,7 +2,7 @@
 	<main class="container">
 		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
 		<transition name="fade">
-			<div class="alert alert-danger" v-if="error">{{ error }}</div>
+			<Alerte type="danger" :error="error" />
 		</transition>
 		<transition name="fade">
 			<div v-if="wwResult">