get_app Download

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.

You can specify for window.location.href

TIP

you can use the target property to window.open()

Edit this page

API #

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

Card keyboard_arrow_right