Button

Overview

The Button component is a versatile and customizable button that can function as both a navigational link and a regular button, with options for full-width display, primary or secondary styling, and custom label text. This component is ideal for developers looking for a reusable button that adapts to various use cases within their applications.

Features

• Adaptive Use: Can be used as a NuxtLink for navigation or a clickable button for triggering actions.
• Customizable Appearance: Supports primary and secondary styling modes, with further customization for dark mode.
• Full-Width Option: Can be set to occupy the full width of its container.
• Event Emitting: Emits a custom event when used as a clickable button, facilitating parent component interaction.

Props

• label (String, required): The text displayed on the button.
• link (String, optional, default null): The URL or path the button should navigate to when used as a NuxtLink. If not provided, the component acts as a regular button.
• fullWidth (Boolean, optional, default false): Determines whether the button should expand to fill its container's width.
• secondary (Boolean, optional, default false): Toggles the secondary style for the button, altering its appearance.

Events

• click: Emitted when the button is clicked, allowing the parent component to react to the user's interaction.

Computed Properties

• buttonWidth: Calculates and returns the necessary class to apply the full-width styling.
• getButtonStyle: Determines the button's styling based on the secondary prop, accounting for both light and dark modes.

Example Usage

As a NuxtLink

<ButtonComponent
  label="Go Home"
  link="/"
  secondary
/>

As a Clickable Button

<ButtonComponent label="Submit" @click="handleSubmit" fullWidth />

Styling

The button's appearance is controlled via Tailwind CSS classes, allowing for easy customization. The component supports both a primary and secondary styling mode, with each mode having tailored styles for light and dark themes.

Usage

To integrate the Dynamic Button component into your Nuxt 3 application:

1. Ensure Tailwind CSS is set up in your project for consistent styling.
2. Copy the component code into a new .vue file within your components directory.
3. Import and use the ButtonComponent component in your application as required, providing the necessary props for customization.

Component Code

<script setup lang="ts">
interface PropsInterface {
  label: string;
  link?: string | null;
  fullWidth?: boolean;
  secondary?: boolean;
}

interface EmitsInterface {
  (event: 'click'): void;
}

const props = withDefaults(defineProps<PropsInterface>(), {
  link: null,
  fullWidth: false,
  secondary: false,
});

const emits = defineEmits<EmitsInterface>();

const buttonWidth = props.fullWidth ? ' w-full' : '';

const getButtonStyle = computed(() => {
  if (props.secondary) {
    return 'border-black dark:border-primary bg-primary dark:bg-black text-black dark:text-primary hover:bg-black dark:hover:bg-primary  hover:text-primary dark:hover:text-black';
  } else {
    return 'border-black dark:border-primary bg-black dark:bg-primary text-primary dark:text-black hover:bg-primary dark:hover:bg-black hover:text-black dark:hover:text-primary';
  }
});

function clicked() {
  emits('click');
}
</script>

<template>
  <div
    class="max-w-xl"
    :class="buttonWidth"
  >
    <div class="flex">
      <div :class="buttonWidth">
        <!-- ROUTER BUTTON -->
        <NuxtLink
          v-if="link"
          :to="link"
          class="flex justify-center rounded-lg border-2 px-4 py-1 font-bold"
          :class="getButtonStyle"
        >
          {{ label }}
        </NuxtLink>
        <!-- REGULAR BUTTON -->
        <div
          v-else
          class="flex cursor-pointer justify-center rounded-lg border-2 px-4 py-1 font-bold"
          :class="getButtonStyle"
          @click="clicked()"
        >
          {{ label }}
        </div>
      </div>
    </div>
  </div>
</template>