ListmonkButton

Usage

ListmonkButton component accepts props and you can customize it according to your needs.

<template>
  <ListmonkForm>
    <ListmonkButton 
      title="Send" 
    />
  </ListmonkForm>
</template>
<template>
  <ListmonkForm>
    <ListmonkButton 
      title="Send" 
      class="button"
    />
  </ListmonkForm>
</template>

<style scoped>
  .button {
     ...
  }
</style>

If you want more control over button's content you can define some content like an icon or another component inside the default slot.

<template>
  <ListmonkForm>
    <ListmonkButton>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/>
      </svg>
    </ListmonkButton>
  </ListmonkForm>
</template>
<template>
  <ListmonkForm>
    <ListmonkButton class="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 12h16m0 0l-6-6m6 6l-6 6"/>
      </svg>
    </ListmonkButton>
  </ListmonkForm>
</template>

<style scoped>
  .button {
     ...
  }
</style>

Props

ListmonkButton component has two props:

title required

The button's title that will be shown to user.

type optional

The button's type.

Default value: submit.

Table of Contents