Buttons

Nice buttons and easy to use.

Filled

To define the type of button the directive is used vs-type with the value of some type of button like it can be: primary-filled, success-filled, danger-filled, warning-filled, dark-filled.

Border

To add a type of button with edges we change the value of vs-type by: primary-border, success-border, danger-border, warning-border, dark-border

Flat

To add a type of button with edges we change the value of vs-type by: primary-flat, success-flat, danger-flat, warning-flat, dark-flat

Line Down

To add a type of button with edges we change the value of vs-type by: primary-line-down, success-line-down, danger-line-down, warning-line-down, dark-line-down

Gradient

To add a type of button with edges we change the value of vs-type by: primary-gradient, success-gradient, danger-gradient, warning-gradient, dark-gradient

Relief

To add a type of button with edges we change the value of vs-type by: primary-relief, success-relief, danger-relief, warning-relief, dark-relief

Color

There are cases in which we need something more personalized like a specific color, you can change the color of the button with the property vs-color giving it as a value the color.

WARNING

Only colors are supported RGB y HEX.
Example: vs-color="rgb(215, 82, 39)" o vs-color="#d75227"

Icon

You can add an icon to the button with the property vs-icon

TIP

Vuesax use the Google Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Icon only

You can have a button with only the icon you want with the property vs-icon and not add any internal value to the button

TIP

you can use the vs-radius property to determine the border-radius of the button, there are many cases in which we need it to be round for example.



API #

NameTypeParametersDescriptiondefault
vs-typebindThe type of button to useprimary-filled
vs-colorRGB, HEXChange the color of the button
vs-widthStringDetermine the width of the button.auto
vs-iconStringMaterial IconsDetermine the button iconfalse