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 /></span>
         <slot name="end" />
@@ -9,5 +9,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,19 +1,12 @@
 <template>
     <div class="card-footer">
-        <div
-            class="btn btn--link btn--inline btn--med"
-            v-for="(action, index) in actions"
-            :key="index"
-            @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>
+        <btn v-for="(action, index) in actions" :key="index" type="link" class="btn--inline btn--med"
+            @click="action.onClick">
+            <template #start>
+                <an-icon :icon="action.icon" :iconPack="action.iconPack" />
+            </template>
+            {{ action.title }}
+        </btn>
     </div>
 </template>