Button

Examples

Style variants

Available style variants of 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="ghost">
      Ghost
    </veui-button>
    <veui-button ui="ghost strong">
      Strong Ghost
    </veui-button>
    <veui-button ui="ghost aux">
      Aux Ghost
    </veui-button>
    <div class="reverse">
      <veui-button ui="ghost reverse">
        Reverse Ghost
      </veui-button>
    </div>
  </section>
  <section>
    <veui-button ui="text">
      Text
    </veui-button>
    <veui-button ui="text strong">
      Text
    </veui-button>
    <veui-button ui="text aux">
      Text
    </veui-button>
    <veui-button ui="text subtle">
      Text
    </veui-button>
  </section>
  <section>
    <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="icon subtle">
      <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>
section {
  display: flex;
  gap: 12px;

  & + & {
    margin-top: 20px;
  }
}

.reverse {
  margin: -8px;
  padding: 8px;
  border-radius: 4px;
  background-color: #0052cc;
}
</style>

Size variants

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

Edit this demo on GitHubEdit

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

<script>
import { Button } from 'veui'

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

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

Disabled

Set the disabled prop to disable the button.

Disabled

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="disabled">
      Disabled
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      class="button"
      ui="primary"
      :disabled="disabled"
    >
      Primary
    </veui-button>
    <veui-button
      class="button"
      :disabled="disabled"
    >
      Normal
    </veui-button>
    <veui-button
      class="button"
      ui="basic"
      :disabled="disabled"
    >
      Basic
    </veui-button>
    <veui-button
      class="button"
      ui="strong"
      :disabled="disabled"
    >
      Strong
    </veui-button>
    <veui-button
      class="button"
      ui="translucent"
      :disabled="disabled"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      class="button"
      ui="text"
      :disabled="disabled"
    >
      Text
    </veui-button>
    <veui-button
      class="button"
      ui="icon"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon strong"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon aux"
      :disabled="disabled"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="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;
}

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

Loading

Set the loading prop to make the button enter the loading state and disable user interaction.

Edit this demo on GitHubEdit

<template>
<article>
  <section>
    <veui-checkbox v-model="loading">
      Loading
    </veui-checkbox>
  </section>
  <section>
    <veui-button
      class="button"
      ui="primary"
      :loading="loading"
    >
      Primary
    </veui-button>
    <veui-button
      class="button"
      :loading="loading"
    >
      Normal
    </veui-button>
    <veui-button
      class="button"
      ui="basic"
      :loading="loading"
    >
      Basic
    </veui-button>
    <veui-button
      class="button"
      ui="strong"
      :loading="loading"
    >
      Strong
    </veui-button>
    <veui-button
      class="button"
      ui="translucent"
      :loading="loading"
    >
      Translucent
    </veui-button>
  </section>
  <section>
    <veui-button
      class="button"
      ui="text"
      :loading="loading"
    >
      Text
    </veui-button>
    <veui-button
      class="button"
      ui="icon"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon strong"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="button"
      ui="icon aux"
      :loading="loading"
    >
      <veui-icon name="home"/>
    </veui-button>
    <veui-button
      class="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;
}

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

API

Props

Name Type Default Description

ui

string

A combination of enumeration values separated by spaces for preset styles.

Value	Description
`normal`	Default style.
`primary`	Primary button style with a background color of the theme.
`basic`	Basic button style.
`strong`	Strong style, can be used alone or in combination with `text` / `icon` styles.
`translucent`	Semi-transparent style for use on dark backgrounds.
`text`	Pure text style without background color and border.
`icon`	Pure icon style without background color and border.
`aux`	Auxiliary button for use with `text` / `icon` styles.
`subtle`	Subtle button for use with `text` / `icon` styles.
`square`	Square button that can be used together with other styles.
`xs`	Extra small size style.
`s`	Small size style.
`m`	Medium size style.
`l`	Large size style.
`xl`	Extra large size style.

disabled boolean false Whether the button is disabled.

type

string

'button'

Button type. See the type attribute of the original <button> element.

Value	Description
`button`	Normal button.
`submit`	Submit button that triggers an external form submission when clicked.
`reset`	Reset button that resets an external form to its initial values when clicked.

Note that the default value is different from that of the original <button> element. If you need to trigger a form submission, please set it explicitly to submit.

loading boolean false Whether the button is in the loading state. The button does not respond to user interaction in the loading state.

Slots

Name	Description
`default`	Content displayed on the button.

Events

The Button component supports all native events supported by the original <button> element, and the callback functions receive the corresponding native event objects.

Icons

Name	Description
`loading`	The loading state indicator, which displays a loading icon animation by default.

Edit this page on GitHubEdit