CardFooter: Use Btn component for actions

src/components/Btn.vue

@@ -1,5 +1,5 @@
 <template>
-    <conditional-link :link="props" class="btn btn--primary">
+    <conditional-link :link="props" :class="classes">
         <slot name="start" />
         <span>
             <slot />
@@ -11,5 +11,15 @@
 <script setup lang="ts">
 import type { LinkProps } from "./ConditionalLink.vue";
 
-const props = defineProps<LinkProps>();
+interface BtnPropsI {
+    type?: "primary" | "link"
+}
+
+export type BtnProps = BtnPropsI & LinkProps;
+
+const props = defineProps<BtnProps>();
+
+const classes = ["btn"];
+if (props.type === "link") classes.push("btn--link")
+else classes.push("btn--primary")
 </script>

src/components/CardFooter.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="card-footer">
-        <div class="btn btn--link btn--inline btn--med" v-for="(action, index) in actions" :key="index"
+        <btn v-for="(action, index) in actions" :key="index" type="link" class="btn--inline btn--med"
             @click="action.onClick">
-            <an-icon :icon="action.icon" :iconPack="action.iconPack" :iconAsImage="action.iconAsImage"
-                :altText="action.altText" />
-            <span v-if="action.title">{{ action.title }}</span>
-        </div>
+            <template #start>
+                <an-icon :icon="action.icon" :iconPack="action.iconPack" />
+            </template>
+            {{ action.title }}
+        </btn>
     </div>
 </template>