diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
new file mode 100644
index 0000000..3edaf9d
--- /dev/null
+++ b/src/components/hint/VHint.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import Message from 'primevue/message';
+import type IVHint from './IVHint.type';
+import { computed } from 'vue';
+import styles from '@visua/typography.module.css';
+
+const props = withDefaults(defineProps<IVHint>(), {
+  title: '',
+  icon: false,
+  type: '',
+  disabled: false,
+})
+
+const iconClass = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'ri-spam-fill';
+    case 'warning' : return 'ri-alert-fill';
+    case 'success' : return 'var(--text-default-success)';
+    case 'info': return 'ri-information-fill';
+    default:
+      return undefined;
+}
+});
+
+const severity = computed(() => {
+  switch (props.type) {
+    case 'alert': return 'error';
+    case 'warning' : return 'warn';
+    case 'success' : return 'success';
+    case 'info' : return 'info';
+    case 'active': return 'contrast'
+    default:
+      return 'secondary';
+  }
+});
+</script>
+
+<template>
+  <Message
+    variant="simple"
+    :severity="severity"
+    :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
+    :icon="props.icon ? iconClass: undefined"
+    :closable="false"
+    size="small"
+    role="alert"
+  >
+    {{ props.title }}
+  </Message>
+</template>
+
+<style scoped>
+.p-message.disabled {color: var(--text-disabled-grey);}
+</style>