Button

# Button

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

The buttons are a fundamental part of any project, with vuesax you can add a great button with a single line of code

the buttons have all the states as active, focus, hover, to make its implementation simpler and speed up the work

Code copied

# Flat

You can change the full style towards flat of a button with the flat property that its value is aboolean, so just adding it will change the styles

Code copied

# Border

You can change the full style towards border of a button with the border property that its value is aboolean so just adding it will change the styles

Code copied

# Gradient

You can change the full style towards Gradient of a button with the gradient property that its value is aboolean, so just adding it will change the styles

Gradient Auto Color

Gradient colors are automatically generated by the color property which in this example is theprimary color

Code copied

# Relief

Change the style of the button to a relief aspect with the relief property, the property is aboolean so you can add it without any value.

Code copied

# Transparent

Change the style of the button with the transparent property, the property is aboolean so you can add it without any value.

Code copied

# Shadow

Change the style of the button with the shadow property, the property is aboolean so you can add it without any value.

Code copied

# Color

Change the color of the Button component with the color property and the color value for example (#fff, rgba (100,10,5) or the main colors of vuesax), this will only affect the component and its value can be dynamic

Valor Permitido

La propiedad color permite los colores principales de vuesax ( Primary(default), Success, danger, warn, dark )
Tambien estan permitidos los colores (RGB y HEX)

Colores Boolean (Opcional)

Ahora puedes usar los colores principales directamente en el componente como un valor Boolean
si quieres que el componente sea de color warn con agregar la propiedad warn al componente ya se cambiara el color

Code copied

# Icon

If you need an icon-only button use the icon property, the property is aboolean so you can add it without any value.

This property makes the button have a specific size making it the same width and height, do not use when it is icon and text

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Code copied

# Icon - Text

If you need a button with text and icon you can do them by adding them in the slot default.

Code copied

# Circle

You can completely round the corners with the circle property, the property is aboolean so you can add it without any value.

Code copied

# Square

You can make all the corners completely straight with the Square property, the property is aboolean so you can add it without any value.

Code copied

# Size

Change the size of the entire button including padding, font-size and border with the size property

values:

  • xl
  • l
  • default
  • small
  • mini
Code copied

# Loading New

Now you can add a loading status with the loading property, the property is aboolean so you can add it without any value.

Code copied

# Upload New

Now you can add a status of sending or uploading data to the server with the upload property, the property is aboolean so you can add it without any value.

Code copied

# Block New

You can make the button have the full width allowed with the block property, the property is aboolean so you can add it without any value.

Code copied

# Animate New

You can create an animation to the component by adding the ``slot="animate" `and the content will be the one that appears when the component is animated

You can also change the type of animation with the animation-type property and the allowed values ​​are (vertical, scale,rotate)

Code copied

# Social New

Using the colors of social networks is very common in a project either a login button or a share button so Vuesax makes it easy for you to search for each color and just by putting the name of the network you already change the whole style of the component

Supported colors: (facebook, twitter, youtube, pinterest, linkedin, snapchat, whatsapp, tumblr, reddit, spotify, amazon, medium, vimeo, skype, dribbble, slack, yahoo, twitch, discord, telegram, google-plus, messenger)

Code copied

# Floating New

You can make a float style button easily with the Floating property, the property is aboolean so you can add it without any value.

these buttons usually do an important action in specific and go with a fixed position in the lower corner

Code copied

# Group New

If you need to make a group of buttons you can use the sub-component <vs-button-group> </vs-button-group> and inside the default slot put the buttons you want to group

Code copied

# Toggle New

This is an example of what you can achieve with simple logic and few lines of code.

Code copied

# To - href New

If you need to use a button such as a vue-router link or an external link you can do it with the properties (to: vue-router link) or (href: html external link)

Code copied

# API

props

Property Type Values Description default Example More
color String primary success danger warning dark RGB HEX Change the color of the component and some of its sub components. primary Usage Open Close 
<vs-button
  color="success"
>
  Success
</vs-button>
style button Prop flat border gradient transparent dashed shadow relief floating Change the style of the component and its states. Usage Open Close 
<vs-button
  flat
  >
  Flat
</vs-button>
active Boolean true false Determine if the component is active and change its style to that state. false Usage Open Close 
<vs-button active >
  Default
</vs-button>
upload Boolean true false Determine if the component has the upload status active by changing the style and adding the animation. false Usage Open Close 
<vs-button upload >
  <i class='bx bxs-wallet'></i> Wallet
</vs-button>
to String url - vue-router Add the functionality of vue-router to the button, clicking it will redirect to the last route. false Usage Open Close 
<vs-button to="/" >
  Example prop - to
</vs-button>
href String href - link Add an href of an external link to add the functionality by clicking on the component. false Usage Open Close 
<vs-button href="https://lusaxweb.github.io/vuesax/" >
  Example prop - url
</vs-button>
blank Boolean true false as in an html element `a` determines whether a new window is opened or the current one is replaced. false Usage Open Close 
<vs-button blank href="https://lusaxweb.github.io/vuesax/" >
  Example prop - url
</vs-button>
icon Boolean true false Determine if the component contains only one icon, by adding this property the component has an equal width and height. false Usage Open Close 
<vs-button icon >
  <i class='bx bx-home-alt'></i>
</vs-button>
circle Boolean true false Change the border radius to give a circle style. false Usage Open Close 
<vs-button icon circle >
  <i class='bx bx-home-alt'></i>
</vs-button>
square Boolean true false Change the border radius to give a rectangle style. false Usage Open Close 
<vs-button icon square > // <------
  <i class='bx bx-home-alt'></i>
</vs-button>
block Boolean true false Change the width of the component to the possible total determined by the parent element. false Usage Open Close 
<vs-button block >
  <i class='bx bxs-paint-roll' ></i> Edit Theme
</vs-button>
animationType Boolean true false Change the type of animation, this property only works if you have the slot animate. false Usage Open Close 
<vs-button flat color="success" animation-type="vertical" >
  Message
  <template v-slot:animate >
    <i class='bx bx-mail-send' ></i> Send
  </template>
</vs-button>
animateInactive Boolean true false Determine if the animation is active for the user when hovering. false Usage Open Close 
<vs-button :animate-inactive="successFace" @click="handleClickFace" :loading="loadingFace" color="facebook">
  <i class='bx bxl-facebook-square' ></i>
  {{ successFace ? 'Logout' : 'Facebook' }}
  <template v-slot:animate >
    <i class='bx bx-user' ></i> Login
  </template>
</vs-button>

slots

Property Type Values Description default Example More
animate slot Slot To add the element that will be displayed in the animation. Usage Open Close 
<vs-button >
  Home
  <template v-slot:animate >
    <i class='bx bx-home-alt' ></i>
  </template>
</vs-button>
Last Updated: 2/10/2020, 2:21:50 AM

Alert