Reusabe button component in modal contact and home

Author: realstoman

src/components/HireMeModal.vue

@@ -90,7 +90,8 @@
 									</div>
 
 									<div class="mt-6 pb-4 sm:pb-1">
-										<button
+										<Button
+											title="Send Request"
 											class="px-4
 											sm:px-6
 											py-2
@@ -104,16 +105,15 @@
 											focus:ring-1 focus:ring-indigo-900"
 											type="submit"
 											aria-label="Submit Request"
-										>
-											Send Request
-										</button>
+										/>
 									</div>
 								</form>
 							</div>
 							<div
 								class="modal-footer mt-2 sm:mt-0 py-5 px-8 border0-t text-right"
 							>
-								<button
+								<Button
+									title="Close"
 									class=" px-4
 									sm:px-6
 									py-2 bg-gray-600 text-primary-light hover:bg-ternary-dark dark:bg-gray-200 dark:text-secondary-dark dark:hover:bg-primary-light
@@ -123,9 +123,7 @@
 									focus:ring-1 focus:ring-indigo-900"
 									@click="showModal()"
 									aria-label="Close Modal"
-								>
-									Close
-								</button>
+								/>
 							</div>
 						</div>
 					</div>
@@ -137,8 +135,10 @@
 
 <script>
 import feather from 'feather-icons';
+import Button from './reusable/Button.vue';
 export default {
 	props: ['showModal', 'modal', 'categories'],
+	components: { Button },
 	data() {
 		return {};
 	},

src/components/contact/ContactForm.vue

@@ -76,21 +76,21 @@
 				</div>
 
 				<div class="mt-6">
-					<button
+					<Button
+						title="Send Message"
 						class="font-general-medium px-4 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 focus:ring-1 focus:ring-indigo-900 rounded-lg"
 						type="submit"
 						aria-label="Send Message"
-					>
-						Send Message
-					</button>
+					/>
 				</div>
 			</form>
 		</div>
 	</div>
 </template>
 
 <script>
-export default {};
+import Button from '../reusable/Button.vue';
+export default { components: { Button } };
 </script>
 
 <style lang="scss" scoped></style>

src/components/shared/AppHeader.vue

@@ -69,13 +69,12 @@
 			>
 				<!-- Hire me button -->
 				<div class="hidden md:block">
-					<button
+					<Button
+						title="Hire Me"
 						class="text-md font-general-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-md px-5 py-2.5"
 						@click="showModal()"
 						aria-label="Hire Me Button"
-					>
-						Hire Me
-					</button>
+					/>
 				</div>
 
 				<!-- Theme switcher large screen -->
@@ -102,12 +101,14 @@ import ThemeSwitcher from '../ThemeSwitcher';
 import HireMeModal from '../HireMeModal.vue';
 import feather from 'feather-icons';
 import AppHeaderLinks from './AppHeaderLinks.vue';
+import Button from '../reusable/Button.vue';
 
 export default {
 	components: {
 		ThemeSwitcher,
 		HireMeModal,
 		AppHeaderLinks,
+		Button,
 	},
 	data() {
 		return {