Button

Demos

Stylistic variants

Available style variants for the ui prop: primary / strong / translucent / text / icon.

<template>
<article>
  <section>
    <veui-button ui="primary">
      Primary
    </veui-button>
    <veui-button>Normal</veui-button>
    <veui-button ui="basic">
      Basic
    </veui-button>
    <veui-button ui="strong">
      Strong
    </veui-button>
    <veui-button ui="translucent">
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button ui="text">
      Text
    </veui-button>
    <veui-button ui="icon">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="icon strong">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="icon aux">
      <veui-icon name="home"/>
    </veui-button>
    <veui-button ui="primary square">
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

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

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

<style lang="less" scoped>
.veui-button {
  margin-right: 1em;
}

section {
  margin-top: 20px;
}
</style>

Size variants

Available size variants for the ui prop: xs / s / m / l / xl.

Edit this page on GitHubEdit

<template>
<article>
  <veui-button ui="xl">
    xl
  </veui-button>
  <veui-button ui="l">
    l
  </veui-button>
  <veui-button ui="m">
    m
  </veui-button>
  <veui-button ui="s">
    s
  </veui-button>
  <veui-button ui="xs">
    xs
  </veui-button>
</article>
</template>

<script>
import { Button } from 'veui'

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

<style lang="less" scoped>
.veui-button {
  margin-right: 1em;
}
</style>

Disabled state

Use the disabled prop to set a button to disabled state.

Disabled

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      ui="primary"
      :disabled="disabled"
    >
      Primary
    </veui-button>
    <veui-button :disabled="disabled">
      Normal
    </veui-button>
    <veui-button
      ui="basic"
      :disabled="disabled"
    >
      Basic
    </veui-button>
    <veui-button
      ui="strong"
      :disabled="disabled"
    >
      Strong
    </veui-button>
    <veui-button
      ui="translucent"
      :disabled="disabled"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      ui="text"
      :disabled="disabled"
    >
      Text
    </veui-button>
    <veui-button
      ui="icon"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon strong"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon aux"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="primary square"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox, Icon } from 'veui'
import 'veui-theme-dls-icons/home'

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-button {
  margin-right: 1em;
}
</style>

Loading state

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

Edit this page on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="loading">
      Loading
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      ui="primary"
      :loading="loading"
    >
      Primary
    </veui-button>
    <veui-button :loading="loading">
      Normal
    </veui-button>
    <veui-button
      ui="basic"
      :loading="loading"
    >
      Basic
    </veui-button>
    <veui-button
      ui="strong"
      :loading="loading"
    >
      Strong
    </veui-button>
    <veui-button
      ui="translucent"
      :loading="loading"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      ui="text"
      :loading="loading"
    >
      Text
    </veui-button>
    <veui-button
      ui="icon"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon strong"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="icon aux"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      ui="primary square"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
  </section>
</article>
</template>

<script>
import { Button, Checkbox, Icon } from 'veui'
import 'veui-theme-dls-icons/home'

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

<style lang="less" scoped>
section {
  margin-bottom: 1em;
}

.veui-button {
  margin-right: 1em;
}
</style>

API

Props

Name Type Default Description

ui

string=

Style variants. A space-separated list of enum values.

Value	Description
`normal`	Normal button. Default style.
`primary`	Primary button.
`basic`	Basic button.
`strong`	Strong button. Can be used alone or together with `text` / `icon`.
`translucent`	Translucent button, typically used on dark background.
`text`	Text button.
`icon`	Icon button.
`aux`	Auxilary button. Need to be used with `text` / `icon` styles.
`square`	Square button. Can be used with other styles.
`xs`	Extra small.
`s`	Small.
`m`	Medium.
`l`	Large.
`xl`	Extra large.

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.

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.

Edit this page on GitHubEdit