Appearance

VfButton ​

Basic ​

A simple button with label text.

vue
<VfButton name="submit" text="Button" />
vue
<template>
  <VfButton name="submit" text="Button" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  submit: { type: 'button', text: 'Button' },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>

Actions ​

Use the action prop to trigger form actions. Set it to 'submit' to submit the form or 'reset' to reset all elements to their default values.

vue
<VfButton name="submit" text="Submit" action="submit" />
<VfButton name="reset" text="Reset" action="reset" />
vue
<script setup lang="ts">
const handleClick = ({ form$ }) => {
  alert(`Hello ${form$.model.name || 'there'}!`)
}
</script>

<template>
  <VfForm stacked>
    <VfText name="name" placeholder="Type your name" />
    <VfButton
      name="submit"
      text="Submit"
      action="submit"
      @click="handleClick"
    />
    <VfButton name="reset" text="Reset" action="reset" />
  </VfForm>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const handleClick = ({ form$ }) => {
  alert(`Hello ${form$.model.name || 'there'}!`)
}

const schema = defineSchema({
  actions: {
    type: 'group',
    stacked: true,
    schema: {
      name: { type: 'text', placeholder: 'Type your name' },
      submit: {
        type: 'button',
        text: 'Submit',
        action: 'submit',
        onClick: handleClick,
      },
      reset: { type: 'button', text: 'Reset', action: 'reset' },
    }
  }
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Icons ​
Use the icon prop to display an icon inside the button. Control icon placement with iconPos — 'left' (default), 'right', 'top', or 'bottom'. When no text is provided, the button renders as an icon-only button.
vue
<VfButton name="home" icon="home" />
<VfButton name="profile" text="Profile" icon="user" icon-pos="left" />
<VfButton name="save" text="Save" icon="check" icon-pos="right" />
<VfButton name="search" text="Search" icon="search" icon-pos="top" />
<VfButton name="update" text="Update" icon="redo" icon-pos="bottom" />
vue
<template>
  <VfGroup name="icons1" stacked>
    <VfButton name="home" icon="home" />
    <VfButton
      name="profile"
      text="Profile"
      icon="user"
    />
    <VfButton
      name="save"
      text="Save"
      icon="check"
      icon-pos="right"
    />
  </VfGroup>
  <VfGroup name="icons2" stacked>
    <VfButton
      name="search"
      text="Search"
      icon="search"
      icon-pos="top"
    />
    <VfButton
      name="update"
      text="Update"
      icon="redo"
      icon-pos="bottom"
    />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  icons1: {
    type: 'group',
    stacked: true,
    schema: {
      home: { type: 'button', icon: 'home' },
      profile: { type: 'button', text: 'Profile', icon: 'user', iconPos: 'left' },
      save: { type: 'button', text: 'Save', icon: 'check', iconPos: 'right' },
    }
  },
  icons2: {
    type: 'group',
    stacked: true,
    schema: {
      search: { type: 'button', text: 'Search', icon: 'search', iconPos: 'top' },
      update: { type: 'button', text: 'Update', icon: 'redo', iconPos: 'bottom' },
    }
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Loading ​
Set the loading prop to display a loading spinner. It accepts a boolean, a reactive ref, a function, or a conditions array.
vue
<VfButton name="submit" :loading />
vue
<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)

const handleClick = () => {
  loading.value = true

  setTimeout(() => {
    loading.value = false
  }, 1500)
}
</script>

<template>
  <VfButton
    name="submit"
    text="Loading"
    icon="check"
    :loading
    @click="handleClick"
  />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'
import { ref } from 'vue'

const loading = ref(false)

const schema = defineSchema({
  submit: {
    type: 'button',
    text: 'Loading',
    icon: 'check',
    loading,
    onClick() {
      loading.value = true

      setTimeout(() => {
        loading.value = false
      }, 1500)
    }
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Use href to render the button as an <a> element. Set target for external links. Use to for vue-router navigation.
Link
External
Router
vue
<VfButton name="link" href="#usage.links" />
<VfButton name="external" href="https://vuejs.org" target="_blank" />
<VfButton name="router" to="/" />
vue
<template>
  <VfGroup name="links" stacked>
    <VfButton
      name="link"
      text="Link"
      variant="link"
      href="#usage.links"
    />
    <VfButton
      name="external"
      text="External"
      icon="arrow-up-right-from-square"
      icon-pos="right"
      href="https://vuejs.org"
      target="_blank"
    />
    <VfButton name="router" text="Router" to="/" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  links: {
    type: 'group',
    stacked: true,
    schema: {
      link: {
        type: 'button',
        text: 'Link',
        variant: 'link',
        href: '#usage.links',
      },
      external: {
        type: 'button',
        text: 'External',
        icon: 'arrow-up-right-from-square',
        iconPos: 'right',
        href: 'https://vuejs.org',
        target: '_blank',
      },
      router: {
        type: 'button',
        text: 'Router',
        to: '/',
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Severities ​
The severity prop controls the button's color. Available values are 'primary', 'secondary' (default), 'success', 'info', 'warn', 'help', 'danger', and 'contrast'.
vue
<VfButton name="primary" severity="primary" />
<VfButton name="secondary" severity="secondary" />
<VfButton name="success" severity="success" />
<VfButton name="info" severity="info" />
<VfButton name="warn" severity="warn" />
<VfButton name="help" severity="help" />
<VfButton name="danger" severity="danger" />
<VfButton name="contrast" severity="contrast" />
vue
<template>
  <VfGroup name="severities" stacked>
    <VfButton name="primary" text="Primary" severity="primary" />
    <VfButton name="secondary" text="Secondary" severity="secondary" />
    <VfButton name="success" text="Success" severity="success" />
    <VfButton name="info" text="Info" severity="info" />
    <VfButton name="warn" text="Warn" severity="warn" />
    <VfButton name="help" text="Help" severity="help" />
    <VfButton name="danger" text="Danger" severity="danger" />
    <VfButton name="contrast" text="Contrast" severity="contrast" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  severities: {
    type: 'group',
    stacked: true,
    schema: {
      primary: { type: 'button', text: 'Primary', severity: 'primary' },
      secondary: { type: 'button', text: 'Secondary', severity: 'secondary' },
      success: { type: 'button', text: 'Success', severity: 'success' },
      info: { type: 'button', text: 'Info', severity: 'info' },
      warn: { type: 'button', text: 'Warn', severity: 'warn' },
      help: { type: 'button', text: 'Help', severity: 'help' },
      danger: { type: 'button', text: 'Danger', severity: 'danger' },
      contrast: { type: 'button', text: 'Contrast', severity: 'contrast' },
    }
  }
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Disabled ​
The disabled prop prevents interaction. It works with all severity and variant combinations. It also accepts conditions.
vue
<VfButton name="primary" severity="primary" disabled />
<VfButton name="secondary" severity="secondary" disabled />
<VfButton name="success" severity="success" disabled />
<VfButton name="info" severity="info" disabled />
<VfButton name="warn" severity="warn" disabled />
<VfButton name="help" severity="help" disabled />
<VfButton name="danger" severity="danger" disabled />
<VfButton name="contrast" severity="contrast" disabled />
vue
<template>
  <VfGroup name="disableds" stacked disabled>
    <VfButton name="primary" text="Primary" severity="primary" />
    <VfButton name="secondary" text="Secondary" severity="secondary" />
    <VfButton name="success" text="Success" severity="success" />
    <VfButton name="info" text="Info" severity="info" />
    <VfButton name="warn" text="Warn" severity="warn" />
    <VfButton name="help" text="Help" severity="help" />
    <VfButton name="danger" text="Danger" severity="danger" />
    <VfButton name="contrast" text="Contrast" severity="contrast" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  disableds: {
    type: 'group',
    stacked: true,
    schema: {
      primary: {type: 'button', text: 'Primary', severity: 'primary', disabled: true },
      secondary: {type: 'button', text: 'Secondary', severity: 'secondary', disabled: true },
      success: {type: 'button', text: 'Success', severity: 'success', disabled: true },
      info: {type: 'button', text: 'Info', severity: 'info', disabled: true },
      warn: {type: 'button', text: 'Warn', severity: 'warn', disabled: true },
      help: {type: 'button', text: 'Help', severity: 'help', disabled: true },
      danger: {type: 'button', text: 'Danger', severity: 'danger', disabled: true },
      contrast: {type: 'button', text: 'Contrast', severity: 'contrast', disabled: true },
    }
  }
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Outlined Variant ​
The 'outlined' variant renders the button with a border and transparent background that fills on hover.
vue
<VfButton name="primary" severity="primary" variant="outlined" />
<VfButton name="secondary" severity="secondary" variant="outlined" />
<VfButton name="success" severity="success" variant="outlined" />
<VfButton name="info" severity="info" variant="outlined" />
<VfButton name="warn" severity="warn" variant="outlined" />
<VfButton name="help" severity="help" variant="outlined" />
<VfButton name="danger" severity="danger" variant="outlined" />
<VfButton name="contrast" severity="contrast" variant="outlined" />
vue
<template>
  <VfGroup name="outlineds" stacked>
    <VfButton name="primary" text="Primary" severity="primary" variant="outlined" />
    <VfButton name="secondary" text="Secondary" severity="secondary" variant="outlined" />
    <VfButton name="success" text="Success" severity="success" variant="outlined" />
    <VfButton name="info" text="Info" severity="info" variant="outlined" />
    <VfButton name="warn" text="Warn" severity="warn" variant="outlined" />
    <VfButton name="help" text="Help" severity="help" variant="outlined" />
    <VfButton name="danger" text="Danger" severity="danger" variant="outlined" />
    <VfButton name="contrast" text="Contrast" severity="contrast" variant="outlined" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  outlineds: {
    type: 'group',
    stacked: true,
    schema: {
      primary: { type: 'button', text: 'Primary', severity: 'primary', variant: 'outlined' },
      secondary: { type: 'button', text: 'Secondary', severity: 'secondary', variant: 'outlined' },
      success: { type: 'button', text: 'Success', severity: 'success', variant: 'outlined' },
      info: { type: 'button', text: 'Info', severity: 'info', variant: 'outlined' },
      warn: { type: 'button', text: 'Warn', severity: 'warn', variant: 'outlined' },
      help: { type: 'button', text: 'Help', severity: 'help', variant: 'outlined' },
      danger: { type: 'button', text: 'Danger', severity: 'danger', variant: 'outlined' },
      contrast: { type: 'button', text: 'Contrast', severity: 'contrast', variant: 'outlined' },
    }
  }
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Text Variant ​
The 'text' variant renders the button without a background, showing only the label with the severity color.
vue
<VfButton name="primary" severity="primary" variant="text" />
<VfButton name="secondary" severity="secondary" variant="text" />
<VfButton name="success" severity="success" variant="text" />
<VfButton name="info" severity="info" variant="text" />
<VfButton name="warn" severity="warn" variant="text" />
<VfButton name="help" severity="help" variant="text" />
<VfButton name="danger" severity="danger" variant="text" />
<VfButton name="contrast" severity="contrast" variant="text" />
vue
<template>
  <VfGroup name="texts" stacked>
    <VfButton name="primary" text="Primary" severity="primary" variant="text" />
    <VfButton name="secondary" text="Secondary" severity="secondary" variant="text" />
    <VfButton name="success" text="Success" severity="success" variant="text" />
    <VfButton name="info" text="Info" severity="info" variant="text" />
    <VfButton name="warn" text="Warn" severity="warn" variant="text" />
    <VfButton name="help" text="Help" severity="help" variant="text" />
    <VfButton name="danger" text="Danger" severity="danger" variant="text" />
    <VfButton name="contrast" text="Contrast" severity="contrast" variant="text" />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  actions: {
    type: 'group',
    stacked: true,
    schema: {
      primary: { type: 'button', text: 'Primary', severity: 'primary', variant: 'text' },
      secondary: { type: 'button', text: 'Secondary', severity: 'secondary', variant: 'text' },
      success: { type: 'button', text: 'Success', severity: 'success', variant: 'text' },
      info: { type: 'button', text: 'Info', severity: 'info', variant: 'text' },
      warn: { type: 'button', text: 'Warn', severity: 'warn', variant: 'text' },
      help: { type: 'button', text: 'Help', severity: 'help', variant: 'text' },
      danger: { type: 'button', text: 'Danger', severity: 'danger', variant: 'text' },
      contrast: { type: 'button', text: 'Contrast', severity: 'contrast', variant: 'text' },
    }
  }
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Icon Only ​
Icon-only buttons combine icon with a variant and severity for compact action buttons. The example below shows all severity and variant combinations in both medium and small sizes.
vue
<VfButton name="primary" icon="check" severity="primary" />
<VfButton name="secondary" icon="bookmark" severity="secondary" />
<VfButton name="success" icon="search" severity="success" />
<VfButton name="info" icon="user" severity="info" />
<VfButton name="warn" icon="bell" severity="warn" />
<VfButton name="help" icon="heart" severity="help" />
<VfButton name="danger" icon="times" severity="danger" />
<VfButton name="contrast" icon="star" severity="contrast" />

<VfButton name="primary" icon="check" severity="primary" variant="outlined" />
<VfButton name="secondary" icon="bookmark" severity="secondary" variant="outlined" />
<VfButton name="success" icon="search" severity="success" variant="outlined" />
<VfButton name="info" icon="user" severity="info" variant="outlined" />
<VfButton name="warn" icon="bell" severity="warn" variant="outlined" />
<VfButton name="help" icon="heart" severity="help" variant="outlined" />
<VfButton name="danger" icon="times" severity="danger" variant="outlined" />
<VfButton name="contrast" icon="star" severity="contrast" variant="outlined" />

<VfButton name="primary" icon="check" severity="primary" variant="text" />
<VfButton name="secondary" icon="bookmark" severity="secondary" variant="text" />
<VfButton name="success" icon="search" severity="success" variant="text" />
<VfButton name="info" icon="user" severity="info" variant="text" />
<VfButton name="warn" icon="bell" severity="warn" variant="text" />
<VfButton name="help" icon="heart" severity="help" variant="text" />
<VfButton name="danger" icon="times" severity="danger" variant="text" />
<VfButton name="contrast" icon="star" severity="contrast" variant="text" />
vue
<template>
  <VfGroup name="iconOnly" tabbed>
    <VfGroup name="medium" page="Medium">
      <VfGroup name="filled" stacked>
        <VfButton name="primary" icon="check" severity="primary" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" />
        <VfButton name="success" icon="search" severity="success" />
        <VfButton name="info" icon="user" severity="info" />
        <VfButton name="warn" icon="bell" severity="warn" />
        <VfButton name="help" icon="heart" severity="help" />
        <VfButton name="danger" icon="times" severity="danger" />
        <VfButton name="contrast" icon="star" severity="contrast" />
      </VfGroup>
      <VfGroup name="outlined" stacked>
        <VfButton name="primary" icon="check" severity="primary" variant="outlined" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" variant="outlined" />
        <VfButton name="success" icon="search" severity="success" variant="outlined" />
        <VfButton name="info" icon="user" severity="info" variant="outlined" />
        <VfButton name="warn" icon="bell" severity="warn" variant="outlined" />
        <VfButton name="help" icon="heart" severity="help" variant="outlined" />
        <VfButton name="danger" icon="times" severity="danger" variant="outlined" />
        <VfButton name="contrast" icon="star" severity="contrast" variant="outlined" />
      </VfGroup>
      <VfGroup name="text" stacked>
        <VfButton name="primary" icon="check" severity="primary" variant="text" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" variant="text" />
        <VfButton name="success" icon="search" severity="success" variant="text" />
        <VfButton name="info" icon="user" severity="info" variant="text" />
        <VfButton name="warn" icon="bell" severity="warn" variant="text" />
        <VfButton name="help" icon="heart" severity="help" variant="text" />
        <VfButton name="danger" icon="times" severity="danger" variant="text" />
        <VfButton name="contrast" icon="star" severity="contrast" variant="text" />
      </VfGroup>
    </VfGroup>
    <VfGroup name="small" page="Small">
      <VfGroup name="filled" stacked>
        <VfButton name="primary" icon="check" severity="primary" size="small" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" size="small" />
        <VfButton name="success" icon="search" severity="success" size="small" />
        <VfButton name="info" icon="user" severity="info" size="small" />
        <VfButton name="warn" icon="bell" severity="warn" size="small" />
        <VfButton name="help" icon="heart" severity="help" size="small" />
        <VfButton name="danger" icon="times" severity="danger" size="small" />
        <VfButton name="contrast" icon="star" severity="contrast" size="small" />
      </VfGroup>
      <VfGroup name="outlined" stacked>
        <VfButton name="primary" icon="check" severity="primary" size="small" variant="outlined" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" size="small" variant="outlined" />
        <VfButton name="success" icon="search" severity="success" size="small" variant="outlined" />
        <VfButton name="info" icon="user" severity="info" size="small" variant="outlined" />
        <VfButton name="warn" icon="bell" severity="warn" size="small" variant="outlined" />
        <VfButton name="help" icon="heart" severity="help" size="small" variant="outlined" />
        <VfButton name="danger" icon="times" severity="danger" size="small" variant="outlined" />
        <VfButton name="contrast" icon="star" severity="contrast" size="small" variant="outlined" />
      </VfGroup>
      <VfGroup name="text" stacked>
        <VfButton name="primary" icon="check" severity="primary" size="small" variant="text" />
        <VfButton name="secondary" icon="bookmark" severity="secondary" size="small" variant="text" />
        <VfButton name="success" icon="search" severity="success" size="small" variant="text" />
        <VfButton name="info" icon="user" severity="info" size="small" variant="text" />
        <VfButton name="warn" icon="bell" severity="warn" size="small" variant="text" />
        <VfButton name="help" icon="heart" severity="help" size="small" variant="text" />
        <VfButton name="danger" icon="times" severity="danger" size="small" variant="text" />
        <VfButton name="contrast" icon="star" severity="contrast" size="small" variant="text" />
      </VfGroup>
    </VfGroup>
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  medium: {
    type: 'group',
    page: 'Medium',
    schema: {
      filled: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary' },
          success: { type: 'button', icon: 'search', severity: 'success' },
          info: { type: 'button', icon: 'user', severity: 'info' },
          warn: { type: 'button', icon: 'bell', severity: 'warn' },
          help: { type: 'button', icon: 'heart', severity: 'help' },
          danger: { type: 'button', icon: 'times', severity: 'danger' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast' },
        },
      },
      outlined: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary', variant: 'outlined' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary', variant: 'outlined' },
          success: { type: 'button', icon: 'search', severity: 'success', variant: 'outlined' },
          info: { type: 'button', icon: 'user', severity: 'info', variant: 'outlined' },
          warn: { type: 'button', icon: 'bell', severity: 'warn', variant: 'outlined' },
          help: { type: 'button', icon: 'heart', severity: 'help', variant: 'outlined' },
          danger: { type: 'button', icon: 'times', severity: 'danger', variant: 'outlined' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast', variant: 'outlined' },
        },
      },
      text: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary', variant: 'text' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary', variant: 'text' },
          success: { type: 'button', icon: 'search', severity: 'success', variant: 'text' },
          info: { type: 'button', icon: 'user', severity: 'info', variant: 'text' },
          warn: { type: 'button', icon: 'bell', severity: 'warn', variant: 'text' },
          help: { type: 'button', icon: 'heart', severity: 'help', variant: 'text' },
          danger: { type: 'button', icon: 'times', severity: 'danger', variant: 'text' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast', variant: 'text' },
        },
      },
    },
  },
  small: {
    type: 'group',
    page: 'Small',
    schema: {
      filled: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary', size: 'small' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary', size: 'small' },
          success: { type: 'button', icon: 'search', severity: 'success', size: 'small' },
          info: { type: 'button', icon: 'user', severity: 'info', size: 'small' },
          warn: { type: 'button', icon: 'bell', severity: 'warn', size: 'small' },
          help: { type: 'button', icon: 'heart', severity: 'help', size: 'small' },
          danger: { type: 'button', icon: 'times', severity: 'danger', size: 'small' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast', size: 'small' },
        },
      },
      outlined: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary', size: 'small', variant: 'outlined' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary', size: 'small', variant: 'outlined' },
          success: { type: 'button', icon: 'search', severity: 'success', size: 'small', variant: 'outlined' },
          info: { type: 'button', icon: 'user', severity: 'info', size: 'small', variant: 'outlined' },
          warn: { type: 'button', icon: 'bell', severity: 'warn', size: 'small', variant: 'outlined' },
          help: { type: 'button', icon: 'heart', severity: 'help', size: 'small', variant: 'outlined' },
          danger: { type: 'button', icon: 'times', severity: 'danger', size: 'small', variant: 'outlined' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast', size: 'small', variant: 'outlined' },
        },
      },
      text: {
        type: 'group',
        stacked: true,
        schema: {
          primary: { type: 'button', icon: 'check', severity: 'primary', size: 'small', variant: 'text' },
          secondary: { type: 'button', icon: 'bookmark', severity: 'secondary', size: 'small', variant: 'text' },
          success: { type: 'button', icon: 'search', severity: 'success', size: 'small', variant: 'text' },
          info: { type: 'button', icon: 'user', severity: 'info', size: 'small', variant: 'text' },
          warn: { type: 'button', icon: 'bell', severity: 'warn', size: 'small', variant: 'text' },
          help: { type: 'button', icon: 'heart', severity: 'help', size: 'small', variant: 'text' },
          danger: { type: 'button', icon: 'times', severity: 'danger', size: 'small', variant: 'text' },
          contrast: { type: 'button', icon: 'star', severity: 'contrast', size: 'small', variant: 'text' },
        },
      },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Sizes ​
The size prop controls the button's size. Available values are 'medium' (default) and 'small'.
vue
<VfButton name="small" text="Small" icon="check" size="small" />
<VfButton name="medium" text="Medium" icon="check" size="medium" />
vue
<template>
  <VfGroup name="sizes" stacked>
    <VfButton
      name="small"
      text="Small"
      icon="check"
      size="small"
    />
    <VfButton
      name="medium"
      text="Medium"
      icon="check"
      size="medium"
    />
  </VfGroup>
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  sizes: {
    type: 'group',
    stacked: true,
    schema: {
      small: { type: 'button', text: 'Small', icon: 'check', size: 'small' },
      medium: { type: 'button', text: 'Medium', icon: 'check', size: 'medium' },
    },
  },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Alignment ​
The align prop controls the horizontal alignment of the button within its container. Available values are 'left' (default), 'center', and 'right'.
vue
<VfButton name="left" text="Left" align="left" />
<VfButton name="center" text="Center" align="center" />
<VfButton name="right" text="Right" align="right" />
vue
<template>
  <VfButton name="left" text="Left" align="left" />
  <VfButton name="center" text="Center" align="center" />
  <VfButton name="right" text="Right" align="right" />
</template>
vue
<script setup lang="ts">
import { defineSchema, useForm } from '@vueform/ui'

const schema = defineSchema({
  left: { type: 'button', text: 'Left', align: 'left' },
  center: { type: 'button', text: 'Center', align: 'center' },
  right: { type: 'button', text: 'Right', align: 'right' },
})

const [Form] = useForm({ schema })
</script>

<template>
  <Form />
</template>
Released under the MIT License.
Copyright © 2022-present Adam Berecz