Buttons | Vue.js Framework Components

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()

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