VsudButton

PRO

The VsudButton component provides different styles, and sizes for creating a button.

Demo

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

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

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

Props Information

Name	Type	Default	Description
variant	'contained''outline''gradient'	contained	Change the `VsudButton` background color type.
size	'sm''md''lg'	md	Change the `VsudButton` size.
color	'primary''secondary''info''success''warning''danger''light''dark''white'	success	Change the `VsudButton` background color.
fullWidth	bool	false	If `true` the `VsudButton` get a block level width.
active	bool		used to set `VsudButton` state to active.
slot	node		The `VsudButton` has a default slot that you can pass node or content inside it.

Variants

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

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

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

Sizes

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

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

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

With Icon

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

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

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

Block

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

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

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