Vue Button - Soft UI

PRO

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.

<template>
 <soft-button color="success">Button</soft-button>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
export default { components: { SoftButton, }, };
</script>

1<template>
2 <soft-button color="success">Button</soft-button>
3</template>
4
5<script>
6import SoftButton from "@/components/SoftButton.vue";
7export default { components: { SoftButton, }, };
8</script>

Props Information

Name	Type	Default	Description
variant	'contained''outline''gradient'	contained	Change the `SoftButton` background color type.
size	'sm''md''lg'	md	Change the `SoftButton` size.
color	'primary''secondary''info''success''warning''danger''light''dark''white'	success	Change the `SoftButton` background color.
fullWidth	bool	false	If `true` the `SoftButton` get a block level width.
active	bool		used to set `SoftButton` state to active.
slot	node		The `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.

<template>
 <soft-button color="success" size="md" variant="contained">Default</soft-button>
 <soft-button color="success" size="md" variant="outline">Outline</soft-button>
 <soft-button color="success" size="md" variant="gradient">Gradient</soft-button>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
export default { components: { SoftButton, }, };
</script>

1<template>
2 <soft-button color="success" size="md" variant="contained">Default</soft-button>
3 <soft-button color="success" size="md" variant="outline">Outline</soft-button>
4 <soft-button color="success" size="md" variant="gradient">Gradient</soft-button>
5</template>
6
7<script>
8import SoftButton from "@/components/SoftButton.vue";
9export default { components: { SoftButton, }, };
10</script>

Button izes

Use these examples to create buttons of different sizes.

<template>
 <soft-button color="success" size="sm">Button</soft-button>
 <soft-button color="success" size="md">Button</soft-button>
 <soft-button color="success" size="lg">Button</soft-button>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
export default { components: { SoftButton, }, };
</script>

1<template>
2 <soft-button color="success" size="sm">Button</soft-button>
3 <soft-button color="success" size="md">Button</soft-button>
4 <soft-button color="success" size="lg">Button</soft-button>
5</template>
6
7<script>
8import SoftButton from "@/components/SoftButton.vue";
9export default { components: { SoftButton, }, };
10</script>

Button With Icon

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

<template>
 <soft-button color="success" size="lg">
  <span class="ni ni-button-play ni-lg me-1" />
  Button
 </soft-button>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
export default { components: { SoftButton, }, };
</script>

1<template>
2 <soft-button color="success" size="lg">
3  <span class="ni ni-button-play ni-lg me-1" />
4  Button
5 </soft-button>
6</template>
7
8<script>
9import SoftButton from "@/components/SoftButton.vue";
10export default { components: { SoftButton, }, };
11</script>

Block Button

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

<template>
 <soft-button color="success" fullWidth>Button</soft-button>
</template>

<script>
import SoftButton from "@/components/SoftButton.vue";
export default { components: { SoftButton, }, };
</script>

1<template>
2 <soft-button color="success" fullWidth>Button</soft-button>
3</template>
4
5<script>
6import SoftButton from "@/components/SoftButton.vue";
7export default { components: { SoftButton, }, };
8</script>