Button
Button is an extension to standard button element with an option to add icons and your custom theming.
# Playground
#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
#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: