VEUI

VEUI on GitHub
中文

Button

Demos

Stylistic variants

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

Edit this demo on GitHubEdit
<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="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>
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 for the ui prop: xs / s / m / l / xl.

Edit this demo 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.

Edit this demo 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 demo 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

NameTypeDefaultDescription
uistring=-

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

ValueDescription
normalNormal button. Default style.
primaryPrimary button.
basicBasic button.
strongStrong button. Can be used alone or together with text / icon.
translucentTranslucent button, typically used on dark background.
textText button.
iconIcon button.
auxAuxilary button. Need to be used with text / icon styles.
squareSquare button. Can be used with other styles.
xsExtra small.
sSmall.
mMedium.
lLarge.
xlExtra large.
disabledboolean=falseWhether the button is disabled.
typestring='button'

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

ValueDescription
buttonNormal button.
submitSubmit button. Will cause an ancestor form to be submitted upon clicks.
resetReset button. Will reset all fields to initial value upon clicks.
loadingboolean=falseWhether the button is in loading state. Loading buttons won't respond to user interactions.

Slots

NameDescription
defaultContent 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

NameDescription
loadingThe loading spinner.
Edit this page on GitHubEdit
© Baidu, Inc. 2023