Vue Button - Soft UI


Use our Vue buttons for actions in forms, dialogues, and more.

Buttons are an essential element of web design. Basically, buttons are styled links that grab the users’ attention. They help users navigate our websites or apps and drive them to a particular action like submitting a contact form or placing an order as easy as possible.

See below our button examples that you can use in your Vue.js project. The examples also come in different styles and colors, so you can adapt them easily to your needs.

Default Button

Use this example to create a simple and versatile button.

Props Information

variant'contained''outline''gradient'containedChange the SoftButton background color type.
size'sm''md''lg'mdChange the SoftButton size.
color'primary''secondary''info''success''warning''danger''light''dark''white'successChange the SoftButton background color.
fullWidthboolfalseIf true the SoftButton get a block level width.
activeboolused to set SoftButton state to active.
slotnodeThe SoftButton has a default slot that you can pass node or content inside it.

Button Variants

Use these examples to create awesome buttons in different styles: default, outlined, and with gradient.

Button izes

Use these examples to create buttons of different sizes.

Button With Icon

Use the following example of button with icon that makes the action more explicit.

Block Button

Use the following example if you want to create buttons across the width of the screen.