Refactor button components to support dynamic element types and improve accessibility

Author: IgorKowalczyk

src/components/BadgePreview.vue

@@ -81,7 +81,7 @@ const handleStyleChange = (newStyle: string) => {
     <Input id="input" placeholder="@username" type="text" v-model="state.input" />
    </div>
    <div class="mt-1 flex flex-col items-center gap-2">
-    <button v-for="styleOption in availableStyles" :key="styleOption.name" :class="['mb-2 w-full shrink-0 cursor-pointer rounded-md border border-neutral-800 p-4 text-left text-white outline-hidden duration-200', styleOption.name === state.style ? 'bg-neutral-800/70' : 'hover:bg-neutral-800/40']" @click="handleStyleChange(styleOption.name)">
+    <button v-for="styleOption in availableStyles" :key="styleOption.name" :class="['mb-2 w-full shrink-0 cursor-pointer rounded-md border border-neutral-800 focus:bg-neutral-800 p-4 text-left text-white outline-hidden duration-200', styleOption.name === state.style ? 'bg-neutral-800/70' : 'hover:bg-neutral-800/40']" @click="handleStyleChange(styleOption.name)">
      <h3 class="font-medium capitalize tracking-tight">{{ styleOption.name }}</h3>
      <p class="text-sm text-neutral-400">{{ styleOption.description }}</p>
     </button>

src/components/Button.vue

@@ -16,17 +16,21 @@ const buttonVariants = cva("rounded-md px-4 py-2 font-medium duration-200 disabl
 
 interface ButtonProps {
  variant?: VariantProps<typeof buttonVariants>["variant"];
+ as?: string;
+ href?: string;
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
  variant: "primary",
+ as: "button",
+ href: "",
 });
 
 const emits = defineEmits(["click"]);
 </script>
 
 <template>
- <button @click="$emit('click')" v-bind="$attrs" :class="cn(buttonVariants({ variant: props.variant }), $attrs.class ?? '')">
+ <component :is="props.as" @click="$emit('click')" v-bind="$attrs" :href="props.href" :class="cn(buttonVariants({ variant: props.variant }), $attrs.class ?? '')">
   <slot />
- </button>
+ </component>
 </template>

src/pages/404.astro

@@ -10,9 +10,7 @@ import Layout from "@/layouts/Layout.astro";
   <Header>404 - Page not found</Header>
   <Description>This page does not exist! </Description>
   <div class="mt-6 flex items-center justify-center">
-   <a href="/">
-    <Button variant="primary">Go back to home</Button>
-   </a>
+   <Button as="a" href="/" variant="primary">Go back to home</Button>
   </div>
  </section>
 </Layout>

src/pages/index.astro

@@ -12,12 +12,8 @@ import Layout from "@/layouts/Layout.astro";
    <Header id="main">@igorkowalczyk/profile-views</Header>
    <Description>Create your own badge that will count views anywhere you want!</Description>
    <div class="mt-4 flex items-center justify-center gap-4">
-    <a href="/docs">
-     <Button variant="primary">Documentation</Button>
-    </a>
-    <a href="/github" target="_blank">
-     <Button variant="secondary">Github</Button>
-    </a>
+    <Button variant="primary" href="/docs" as="a">Documentation</Button>
+    <Button variant="secondary" href="/github" as="a">Github</Button>
    </div>
   </div>
   <div class="lg:flex lg:items-center lg:justify-center lg:col-span-1 hidden">