Vue Button

This repository serves as a reference for building a reusable button component in Vue and TailwindCSS.
Documentation

Untitled2.mp4

Features

• Variants: Solid, Soft, Outline, Ghost
• Colors: Primary, Neutral, Danger, Success, Warning, Light, Dark
• Sizes: 20, 24, 28, 32, 36, 40, 44
• Types: Button, Submit, Link (internal/external)
• Icons: Supports icon and icon-only buttons
• States: Loading, Disabled, Active (e.g. when a dropdown is open)

Usage

UIButton

<UIButton size="20" color="primary" variant="outline">
  <template #icon>
    <RiEditLine class="tw-w-full tw-h-full" />
  </template>
  Edit
</UIButton>

UIIconButton

<UIIconButton size="20" color="primary" variant="outline">
  <RiEditLine class="tw-w-full tw-h-full" />
</UIButton>

Props

• size: Specifies the height, with the width adjusting proportionally
  • Options: 20 | 24 | 28 | 32 | 36 | 40 | 44
• type: Defines the button type
  • Options: button | submit | link
  • Note: link turns the button into an anchor element
• to: URL for the link type
• variant: Button style variant
  • Options: solid | soft | outline | ghost
• color: Button color
  • Options: primary | neutral | danger | success | warning | light | dark
• active: Boolean indicating an active state, useful for dropdowns
  • Style is similar to hover state, midway between default and fully active
• disable: Disables the button
• loading: Displays a loading spinner