@MESG-COMPONENTS/BUTTON

Install

npm install @mesg-components/button or yarn add @mesg-components/button

Properties

• href: String.Optional -> external link path
• to: [ Object, String ].Optional -> internal link path
• submit: Boolean.Optional -> determine it's a submit button
• primary: Boolean.Optional -> determine it's a primary button
• small: Boolean.Optional -> Button size
• secondary: Boolean.Optional -> determine it's a secondary button
• white: Boolean.Optional -> determine it's a white button
• outline: Boolean.Optional -> determine it's a outline button
• icon: String.Optional -> icon class name

Slot

• default

Example

Default Button:

<template>
  <button>Default Button</button>
</template>

Primary and submit Button:

<template>
  <button primary submit>Primary Button</button>
</template>

Secondary Button with small:

<template>
  <button secondary small>Secondary Button</button>
</template>

White Button:

<template>
  <button white>White Button</button>
</template>

Outline Button:

<template>
  <button outline>Outline Button</button>
</template>

External link Button:

<template>
  <button :href="www.google.com" target="_blank">External Button</button>
</template>

Internal link Button:

<template>
  <button :href="/">Internal Button</button>
  <!--  using nuxt-link -->
  <button :to="/">Internal Button</button>
</template>

Button with icon:

<template>
  <button primary :icon="fal fa-table">With icon Button</button>
</template>