/vue-button

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

Primary LanguageVue

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