Defining custom props

If existing props don’t support the conditional styling you need, you can add custom props and use them in variants or compoundVariants as needed.

vueless.config.{js,ts}

export default {
  component: {
    UButton: {
      props: {
        /* 
         * Boolean prop example.
         */
        featured: {
          type: "boolean",
          required: false,
          description: "Set button featured." 
        },
        
        /* 
         * Enum (string) prop example.
         */
        shape: {
          type: "string",
          values: ["circle", "parallelogram", "square"],
          default: "square",
          required: true,
          description: "Set button shape."
        }
      }
    }
  }
};

Prop settings

key	default	Description
type	"string"	Supported values: "string", "number", "boolean".
values	[]	Limits possible prop values (union type in TS).
default	""	Defines default value.
required	false	Makes props required.
description	""	Adds props description in Storybook docs.
ignore	false	Hides prop in Storybook docs.

All key are optional.