Button

Overview

The Button component is a fundamental UI element that can be used to trigger actions or navigate to different pages. It supports various styles, sizes, and states to match your application's design needs.

Features

• Multiple variants (solid, soft, subtle, ghost, link)
• Different sizes (xs to xl)
• Support for icons (leading and trailing)
• Loading and disabled states
• Can act as a button or link
• Full width option
• Customizable rounded corners

Usage

Basic Button

The simplest way to use the button is with text content:

<template>
  <MButton>Click me</MButton>
</template>

Variants

The button comes in five different variants to suit different contexts:

<template>
  <div class="flex gap-2 flex-wrap">
    <MButton variant="solid" label="Solid" />
    <MButton variant="soft" label="Soft" />
    <MButton variant="subtle" label="Subtle" />
    <MButton variant="ghost" label="Ghost" />
    <MButton variant="link" label="Link" />
  </div>
</template>

Colors

Buttons support three color schemes:

<template>
  <div class="flex gap-2 flex-wrap">
    <MButton color="primary" label="Primary" />
    <MButton color="neutral" label="Neutral" />
    <MButton color="danger" label="Danger" />
  </div>
</template>

Sizes

Choose from five different sizes:

<template>
  <div class="flex gap-2 items-center flex-wrap">
    <MButton size="xs" label="XS" />
    <MButton size="sm" label="SM" />
    <MButton size="md" label="MD" />
    <MButton size="lg" label="LG" />
    <MButton size="xl" label="XL" />
  </div>
</template>

Icons

Add icons to your buttons using the leadingIcon or trailingIcon props:

<template>
  <div class="flex gap-2 flex-wrap">
    <MButton label="Settings" leadingIcon="i-lucide-settings" />
    <MButton label="Next" trailingIcon="i-lucide-arrow-right" />
    <MButton square icon="i-lucide-plus" />
  </div>
</template>

States

Buttons support various states including loading and disabled:

<template>
  <div class="flex gap-2 flex-wrap">
    <MButton loading label="Loading..." />
    <MButton disabled label="Disabled" />
  </div>
</template>

Links

Use the to prop to make the button act as a link:

<template>
  <MButton to="/" label="Home Page" />
</template>

Props

Slots

Best Practices

1. Use appropriate colors to convey meaning:
   • primary for main actions
   • neutral for secondary actions
   • danger for destructive actions
2. Choose the right variant:
   • solid for primary actions
   • soft or subtle for secondary actions
   • ghost or link for tertiary actions
3. Maintain consistent sizing:
   • Use md size by default
   • Use larger sizes (lg, xl) for main call-to-action buttons
   • Use smaller sizes (xs, sm) for compact interfaces
4. Add loading states for async actions to provide feedback
5. Use icons thoughtfully to enhance visual communication