1 files changed, 29 insertions, 9 deletions
diff --git a/src/components/follow_button/follow_button.vue b/src/components/follow_button/follow_button.vue
index 965d5256..4fc2233a 100644
--- a/src/components/follow_button/follow_button.vue
+++ b/src/components/follow_button/follow_button.vue
@@ -1,13 +1,33 @@
 <template>
-  <button
-    class="btn button-default follow-button"
-    :class="{ toggled: isPressed }"
-    :disabled="disabled"
-    :title="title"
-    @click="onClick"
-  >
-    {{ label }}
-  </button>
+  <div>
+    <button
+      class="btn button-default follow-button"
+      :class="{ toggled: isPressed }"
+      :disabled="disabled"
+      :title="title"
+      @click="onClick"
+    >
+      {{ label }}
+    </button>
+    <confirm-modal
+      :showing="showingConfirmUnfollow"
+      :title="$t('user_card.unfollow_confirm_title')"
+      :confirm-text="$t('user_card.unfollow_confirm_accept_button')"
+      :cancel-text="$t('user_card.unfollow_confirm_cancel_button')"
+      @accepted="doUnfollow"
+      @cancelled="hideConfirmUnfollow"
+    >
+      <i18n
+        path="user_card.unfollow_confirm"
+        tag="span"
+      >
+        <span
+          place="user"
+          v-text="user.screen_name_ui"
+        />
+      </i18n>
+    </confirm-modal>
+  </div>
 </template>
 
 <script src="./follow_button.js"></script>