Easy-to-use button components
To define the type of button the directive is used type
with the value of some type of button like it can be: filled
.
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:
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
You can change the font color of buttons, need only set the prop text-color
with your color.
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
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.
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
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.
You can specify for window.location.href
TIP
you can use the target
property to window.open()
Name | Type | Parameters | Description | default |
---|---|---|---|---|
type | String | The type of button to use | filled | |
color | String | Change the color of the button | primary | |
text-color | String | Change the font color of the button | ||
icon | String | Material Icons | Determine the button icon | |
icon-pack | String | Icon Pack Class Name | Icon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal. | material-icons |
icon-after | Boolean | Determines if the icon is set after the text | false | |
line-origin | String | Determines the output of the line on the button (line) | center | |
line-position | String | Determine if the button (line) has the line up or down | center | |
gradient-direction | String | Determine the angle of the gradient on the button | 30 deg | |
gradient-color-secondary | String | Change the secondary color on the button (gradient) | primary | |
radius | Boolean | Change button radius to circle | false | |
to | String | Object | Added router push navigation to button | false | |
href | String | Object | Added href property to button | ||
target | Boolean | Presence or absence of target property | false | |
routeErr | Event | error | Triggers method when there's error in routing using button component |