@jotnar/m-btn v0.1.3

m-btn-test

A reusable Vue 3 button component with Tailwind CSS 4 styling and Font Awesome support. Customize your buttons with sizes, colors, variants, and icons effortlessly!

📦 Installation

Install the package via npm:

npm i @jotnar/m-btn@latest

Prerequisites: Ensure your project already has Vue 3 (version 3.4.0 or higher) and Tailwind CSS 4 set up, as this component relies on Tailwind CSS classes for styling and Vue 3 for functionality.

🧑‍💻 Usage

You can use the m-btn component in your Vue 3 application either by registering it globally or locally in specific components.

🌐 Global Registration

Register the m-btn component globally in your Vue app to use it anywhere in your application. Follow these steps:

1. Import the component in your main JavaScript file (e.g., main.js):

import { createApp } from 'vue';
import App from './App.vue';
import { MBtn } from '@jotnar/m-btn';

const app = createApp(App);
app.component('m-btn', MBtn);
app.mount('#app');

2. Import the styles in your main CSS file (e.g., main.css):

@import '@jotnar/m-btn/style';
@import 'tailwindcss';

Once these steps are complete, you can use the component anywhere in your app.

📦 Local Registration

Alternatively, import and use the component in specific components:

<template>
  <m-btn color="primary" rounded label="Click Me" />
</template>

<script setup>
import { MBtn } from '@jotnar/m-btn';
</script>

🎛️ Props

The m-btn component offers a wide range of props to customize its appearance and behavior. Below is a detailed table of all available props:

✨ Examples

Below are examples demonstrating the various ways to use the m-btn component, showcasing its sizes, variants, icons, and states.

<template>
  <div class="space-y-4">
    <!-- Sizes -->
    <div class="space-y-2">
      <h3>Sizes</h3>
      <m-btn color="primary" sm label="Small Button" />
      <m-btn color="primary" md label="Medium Button" />
      <m-btn color="primary" lg label="Large Button" />
    </div>

    <!-- Variants -->
    <div class="space-y-2">
      <h3>Variants</h3>
      <m-btn color="primary" rounded label="Default Primary" />
      <m-btn color="primary" outline rounded label="Outline Primary" />
      <m-btn color="primary" text rounded label="Text Primary" />
      <m-btn color="primary" tonal rounded label="Tonal Primary" />
      <m-btn color="primary" elevated rounded label="Elevated Primary" />
    </div>

    <!-- Colors -->
    <div class="space-y-2">
      <h3>Colors</h3>
      <m-btn color="primary" rounded label="Primary" />
      <m-btn color="secondary" rounded label="Secondary" />
      <m-btn color="tertiary" rounded label="Tertiary" />
      <m-btn color="accent" rounded label="Accent" />
      <m-btn color="info" rounded label="Info" />
      <m-btn color="success" rounded label="Success" />
      <m-btn color="warning" rounded label="Warning" />
      <m-btn color="error" rounded label="Error" />
    </div>

    <!-- Shapes -->
    <div class="space-y-2">
      <h3>Shapes</h3>
      <m-btn color="primary" rounded label="Rounded" />
      <m-btn color="primary" full label="Pill Shape" />
    </div>

    <!-- Icons -->
    <div class="space-y-2">
      <h3>Icons</h3>
      <m-btn color="primary" rounded label="Left Icon" licon="fa-solid fa-code" />
      <m-btn color="primary" rounded label="Right Icon" ricon="fa-solid fa-code" />
      <m-btn color="primary" rounded label="Both Icons" licon="fa-solid fa-code" ricon="fa-solid fa-heart" />
      <m-btn color="primary" rounded label="Icon Only" onlyIcon icon="fa-solid fa-code" />
    </div>

    <!-- States -->
    <div class="space-y-2">
      <h3>States</h3>
      <m-btn color="primary" rounded label="Loading" loading />
      <m-btn color="primary" rounded label="Loading with Icons" loading licon="fa-solid fa-code" />
      <m-btn color="primary" rounded label="Disabled" disabled />
      <m-btn color="primary" rounded label="Disabled with Icons" disabled licon="fa-solid fa-code" ricon="fa-solid fa-heart" />
    </div>

    <!-- Custom Class -->
    <div class="space-y-2">
      <h3>Custom Class</h3>
      <m-btn class="bg-blue-500 text-white" rounded label="Custom Style" />
      <m-btn class="bg-green-500 text-white" rounded label="Custom with Icons" licon="fa-solid fa-code" />
    </div>

    <!-- Link -->
    <div class="space-y-2">
      <h3>Link</h3>
      <m-btn color="primary" rounded label="Visit Site" link="https://example.com" />
    </div>
  </div>
</template>

ℹ️ Notes

• Custom Classes:
  If you provide a custom class prop (e.g., class="bg-blue-500 text-white"), the color prop will be ignored, allowing your custom styles to take precedence.

• Icon Support:
  Icons require Font Awesome to be set up in your project. Use the format fa-solid fa-icon-name (e.g., fa-solid fa-code).

• Accessibility:
  For icon-only buttons (onlyIcon), the label prop is used as the aria-label and title to ensure accessibility for screen readers.

🔨 Under Construction

The homepage for this project is currently under construction. In the meantime, you can find the source code and report issues on GitHub:

• GitHub Repository
• Report Issues

⚖️ License

MIT

👤 Author

Jotnar