Button

Demos

Stylistic variants

Available style variants for the ui prop: primary/alt/dark/link.

<template>
<article>
  <veui-button ui="primary">
    Primary
  </veui-button>
  <veui-button>Normal</veui-button>
  <veui-button ui="alt">
    Alternate
  </veui-button>
  <veui-button ui="link">
    Link
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button
  }
}
</script>

Size variants

Available size variants for the ui prop: large/small/tiny/micro.

<template>
<article>
  <veui-button ui="large">
    Large
  </veui-button>
  <veui-button>Normal</veui-button>
  <veui-button ui="small">
    Small
  </veui-button>
  <veui-button ui="tiny">
    Tiny
  </veui-button>
  <veui-button ui="micro">
    Micro
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button
  }
}
</script>

Shape variants

Available shape variants for the ui prop: square/round. We recommend you use this to create icon buttons.

<template>
<article>
  <veui-button ui="square">
    👍
  </veui-button>
  <veui-button ui="round">
    <veui-icon name="edit"/>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon } from 'veui'
import 'veui-theme-one/icons/edit'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  }
}
</script>

Disabled state

Use disabled prop to set a button to disabled state.

Disabled

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      :disabled="disabled"
      ui="primary"
    >
      Primary
    </veui-button>
    <veui-button :disabled="disabled">
      Normal
    </veui-button>
    <veui-button
      :disabled="disabled"
      ui="alt"
    >
      Alternate
    </veui-button>
    <veui-button
      :disabled="disabled"
      ui="link"
    >
      Link
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox } from 'veui'

export default {
  components: {
    'veui-button': Button,
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      disabled: true
    }
  }
}
</script>

Loading state

Use loading prop to set a button to loading state (which will not respond upon clicks).

Override the loading slot to customize icon and label for the loading state.

<template>
<article>
  <veui-button
    loading
    ui="primary"
  >
    Primary
  </veui-button>
  <veui-button loading>
    Normal
  </veui-button>
  <veui-button
    loading
    ui="alt"
  >
    Alternate
  </veui-button>
  <veui-button
    loading
    ui="link"
  >
    Link
  </veui-button>
  <veui-button
    loading
    ui="primary"
  >
    Normal
    <template slot="loading">
      <veui-icon
        name="spinner"
        spin
      />
      <span class="veui-button-loading-text">Submitting...</span>
    </template>
  </veui-button>
</article>
</template>

<script>
import { Button, Icon } from 'veui'
import 'veui-theme-one-icons/spinner'

export default {
  components: {
    'veui-button': Button,
    'veui-icon': Icon
  }
}
</script>

API

Props

Name Type Default Description

ui

string

Style variants.

Value	Description
`primary`	Primary button.
`alt`	Alternative styled button.
`dark`	Button used on dark background.
`link`	Link button.
`large`	Large button.
`small`	Small button.
`tiny`	Tiny button.
`micro`	Micro button.
`round`	Round button.
`square`	Square button.

disabled boolean false Whether the button is disabled.

type

string

'button'

The type of the button. See the type attribute of HTML's native <button> element.

Value	Description
`button`	Normal button.
`submit`	Submit button. Will cause an ancestor form to be submitted upon clicks.
`reset`	Reset button. Will reset all fields to initial value upon clicks.

Note that the default value is different from the native <button> element. You need to explicitly set type to submit if you want to trigger a form submit.

loading boolean false Whether the button is in loading state. Loading buttons won't respond to user interactions.

Slots

Name	Description
`default`	Content of the button.
`loading`	Content of the button with the loading state. Shows an extra loading spinner by default.

Events

Additionally, Button exposes all native events available for native <button> element. The callback parameter is the corresponding native event object for all events.

Icons

Name	Description
`loading`	The loading spinner.