diff --git a/src/components/ui/VnBtn.vue b/src/components/ui/VnBtn.vue
new file mode 100644
index 000000000..40b60e654
--- /dev/null
+++ b/src/components/ui/VnBtn.vue
@@ -0,0 +1,33 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const $props = defineProps({
+    class: { type: String, require: true, default: null },
+    padding: { type: String, require: true, default: null },
+    color: { type: String, require: true, default: null },
+    icon: { type: String, require: true, default: null },
+    promise: { type: Function, require: true, default: null },
+});
+const { t } = useI18n();
+async function onClick() {
+    if ($props.promise) return await $props.promise();
+}
+</script>
+<template>
+    <QBtn
+        :class="$props.class"
+        :padding="$props.padding"
+        :icon="$props.icon"
+        flat
+        :color="$props.color"
+        round
+        @click="onClick()"
+    >
+        <QTooltip>
+            <slot name="tooltip">
+                {{ t('components.smartCard.downloadFile') }}
+            </slot></QTooltip
+        >
+    </QBtn>
+</template>
+<style lang="scss" scoped></style>