Buttons
Easy-to-use button components
Filled
To define the type of button the directive is used type with the value of some type of button like it can be: filled.
Border
To add a type of button with edges we change the value of border.
Flat
To add a type of button with edges we change the value of flat.
Line Down
To add a type of button with edges we change the value of type by: line.
TIP
you can change the position of the line up with the property line-position="top". You can also change the way the line appears on mouse hover with the property line-origin using the allowed values:
- left
- center (default)
- right
Gradient
To add a type of button with edges we change the value of type by: gradient
Relief
To add a type of button with edges we change the value of type by: 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 color giving it as a value the color.
TIP
If you need a gradient type button, to assign the color you have to use the property gradient-color-secondary
Text Color
You can change the font color of buttons, need only set the prop text-color with your color.
Icon
You can add an icon to the button with the property icon
TIP
Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons page. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.
TIP
You can change the position of the icon so that it is after the text with the property icon-after
Icon only
You can have a button with only the icon you want with the property icon and not add any internal value to the button
TIP
you can use the radius property to determine the border-radius of the button, there are many cases in which we need it to be round for example.
Size
To define the size of button the directive is used size. there are three type of size: large, default, small. It is not important to specify the size when the button is of type default
Router
You can send a string or object to directive to. This directive wrap a $router.push() vue method, you can use all programmatic navigation on vue router.
Link
You can specify for window.location.href
TIP
you can use the target property to window.open()