Vue 2.x
Vue 3.x
Vue 2.x
Getting Started
Form Elements
Button
Checkbox
Checkbox Group
Color Picker
Dropdown
Input
Inline Input
Number
Rating
Radio
Radio Group
Slider
Text Area
Text Editor
Toggle Switch
Loaders
Directives
Misc.

Button

# Documentation

Button is an extension to standard button element with an option to add icons and your custom theming.

# Playground
 <lv-button 
     label="This is a Button"
     type="button"
     size="xl"
  />
Realtime Customizations












#Basic usage

Use the buttons with some basic and complex use cases by passing either classes or props eg. for link button, pass --link-button For disable button, set the disable prop to true. LightVue Button is Both compatible with Vue 2.x and Vue 3.x

#Icon button

You can add left and right icons to the Button component using the icon and icon-right props respectively.(The icons can be String)
You can also use Light Icons from LightVue and pass it into the button.

#Colors

You can simply change color by changing the class name.You can set the values to suffix to lv-- primary secondary success info warning help danger,complementary

#Text button

You can set the button style to text by passing --text-button alongside with other variation classes

#Outlined button

You can set the button style to outlined by setting outlined prop to true.You can use other variation classes with it.

#Rounded button

The button style in Material Components can be styled to appear as though it’s been rounded off and thus creating a smoother feel. This can be achieved by simply setting the rounded prop to true like so:

#Button size

You can customize size of the button by passing it through size prop. There are 5 different sizes avaliable: small, medium, large, extra large and x-large...You can set them as sm,md,lg,xl

#Button group

You can group the buttons by wrapping them in lv-buttonset class.

#Push button

By setting the style of a button to a push one, you can give it the appearance of a push button. In case there might be a need to provide further variations regarding the look and feel of your buttons (for example, you might want them to appear differently as they are being hovered or focused on), then we would recommend you read through this page

#Deep shadow hover

You can use some deep shadow hover button variation by passing deep-shadow-hover prop

#Push with soft shadow

You can use some Miscellaneous button variation by passing deep-shadow prop with other variations like push prop

#Miscellaneous

#Setup

You can import a component and register it as a local and global vue component as follows:

// import the component
import LvButton from 'lightvue/button';

// Register the component locally
export default {
    components: {
        LvButton
    }
}
// Register the component globally (Vue 2.x)
Vue.component('LvButton', LvButton);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvButton', LvButton);
app.mount('#app')

#APIs

All of the props, events and slots of the component are mentioned below:

Props
Type
Default
Description
icon
String
Allows user to show an icon on the button.
iconRight
String
Allows user to have an icon on right.
label
String
Allows user to change the label on the button.
outlined
Boolean
false
Allows the user to display button in a loading mode with the help of dots or spinner.
push
Boolean
false
Allows the user to have push functionality on the button.
raised
Boolean
false
Allows the user to have raised functionality on the button.
deepShadow
Boolean
false
Allows the user to have deep shadow on the button.
deepShadowHover
Boolean
false
Allows the user to have deep shadow on hovering on the button.
size
String
md
Allows user to configuer the size of the button.
rounded
Boolean
false
Adds the border radius add make the button look round.
type
String
button
Configures the type of the button.
Events
Parameters
Description
update:modelValue
value:  String
Can also be achieved by v-model
change
value:  boolean
Changes the value of toggle switch
click
value:  String
Toggle switch changer on click.
focus
value:  String
Decides what happens when toggle switch is in focus.
blur
value:  String
Decide the functionality of toggle switch when it is blur.
Copyright 2022 © LightVue. All rights reserved.