diff --git a/src/client/app/test/views/index.vue b/src/client/app/test/views/index.vue
index b1947ffa4..be75f8ae8 100644
--- a/src/client/app/test/views/index.vue
+++ b/src/client/app/test/views/index.vue
@@ -11,6 +11,25 @@
 			</div>
 		</section>
 	</ui-card>
+
+	<ui-card>
+		<div slot="title">Dialog Generator</div>
+		<section class="fit-top">
+			<ui-select v-model="dialogType" placeholder="">
+				<option value="info">Info</option>
+				<option value="success">Success</option>
+				<option value="error">Error</option>
+			</ui-select>
+			<ui-input v-model="dialogTitle">
+				<span>Title</span>
+			</ui-input>
+			<ui-input v-model="dialogText">
+				<span>Text</span>
+			</ui-input>
+			<ui-switch v-model="dialogShowCancelButton">With cancel button</ui-switch>
+			<ui-button @click="showDialog">Show</ui-button>
+		</section>
+	</ui-card>
 </main>
 </template>
 
@@ -21,7 +40,22 @@ export default Vue.extend({
 	data() {
 		return {
 			mfm: '',
+			dialogType: 'success',
+			dialogTitle: '',
+			dialogText: 'Hello World!',
+			dialogShowCancelButton: false
 		};
+	},
+
+	methods: {
+		showDialog() {
+			this.$root.alert({
+				type: this.dialogType,
+				title: this.dialogTitle,
+				text: this.dialogText,
+				showCancelButton: this.dialogShowCancelButton
+			});
+		}
 	}
 });
 </script>