Style variants

VEUI provide style variants via the ui prop. Theme packages can provide different ui value for each component and users can also use custom ui values to create extended style variants.

The ui prop

The ui prop takes a string consists of a list of whitespace-separated tokens, similar to HTML's native class attribute. Each token stands for a style variant of a component. In the following example, primary and large are both style variants of component <veui-button>:

<veui-button ui="primary large">OK</veui-button>

Use the DLS theme

You can enable veui-theme-dls by setting the corresponding options for veui-loader. The theme package provides style variants for most components. You can refer to documentation for the ui prop in each component to learn about the supported style variants.

Custom style variants

You don't need to register via component API to define custom ui tokens. Just adding style declarations for the corresponding [ui~="..."] selector would be sufficient.

eg. If you want a new secondary variant for Button component, just add styles to .veui-button[ui~"secondary"]:

Edit this page on GitHubEdit
  <veui-button ui="primary">
  <veui-button ui="secondary">

import { Button } from 'veui'

export default {
  components: {
    'veui-button': Button

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

.veui-button[ui~="secondary"] {
  background-color: #e5e5ff;

  &:hover {
    background-color: #ddf;

  &:active {
    background-color: #ccf;

Custom theme package

If you want to create a custom theme package, please read more about VEUI's theming API more the advanced ways of customizing ui prop at Advanced › Theming.

Edit this page on GitHubEdit