Vue Forms Buttons

Use the buttons on any mobile and desktop form or page. The buttons come with several rendering modes and styles. Use it as:

  • fluid-width buttons (the buttons grow with their content)
  • justified
  • full width buttons

Icon support is built in along with three different styles:

  • filled buttons
  • flat buttons
  • outlined buttons
Customize the look & feel:  See how to apply color presets →
Get started with this example

Demo

Javascript jQuery Angular React Vue 
<script setup>
const isToastOpen = ref(false)
</script>

<template>
  <MbscPage>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Buttons</div>
      <div class="mbsc-button-group">
        <MbscButton>Button</MbscButton>
        <MbscButton disabled>Disabled</MbscButton>
      </div>
      <div class="mbsc-button-group">
        <MbscButton @click="isToastOpen = true">Click for action</MbscButton>
        <MbscToast
          message="Button was clicked"
          :isOpen="isToastOpen"
          @close="isToastOpen = false"
        />
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Full width buttons</div>
      <div class="mbsc-button-group-block">
        <MbscButton>Full width button</MbscButton>
        <MbscButton disabled>Disabled full width</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Justified buttons</div>
      <div class="mbsc-button-group-justified">
        <MbscButton>Tag</MbscButton>
        <MbscButton>Favorite</MbscButton>
        <MbscButton>Flag</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Icons</div>
      <div class="mbsc-button-group">
        <MbscButton icon="tag"></MbscButton>
        <MbscButton icon="heart"></MbscButton>
        <MbscButton icon="flag" disabled></MbscButton>
      </div>
      <div class="mbsc-button-group">
        <MbscButton startIcon="tag">Tag</MbscButton>
        <MbscButton startIcon="heart">Favorite</MbscButton>
        <MbscButton startIcon="flag" disabled>Flag</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Flat buttons</div>
      <div class="mbsc-button-group">
        <MbscButton variant="flat">Flat</MbscButton>
        <MbscButton variant="flat" startIcon="arrow-left5">Flat & Icon</MbscButton>
        <MbscButton variant="flat" icon="arrow-left5"></MbscButton>
        <MbscButton variant="flat" icon="key2" disabled></MbscButton>
        <MbscButton variant="flat" disabled>Flat disabled</MbscButton>
      </div>
    </div>
    <div class="mbsc-form-group">
      <div class="mbsc-form-group-title">Outline buttons</div>
      <div class="mbsc-button-group">
        <MbscButton variant="outline">Outline</MbscButton>
        <MbscButton variant="outline" startIcon="arrow-left5">Outline & Icon</MbscButton>
        <MbscButton variant="outline" icon="arrow-left5"></MbscButton>
        <MbscButton variant="outline" icon="key2" disabled></MbscButton>
        <MbscButton variant="outline" disabled>Outline disabled</MbscButton>
      </div>
    </div>
  </MbscPage>
</template>
Buttons
Full width buttons
Justified buttons
Icons
Flat buttons
Outline buttons
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.