Vue Button - Argon

PRO

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

Demo

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

<template>
  <argon-button>Button</argon-button>
</template>

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

Props Information

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

Variants

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

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

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

Sizes

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

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

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

With Icon

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

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

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

Block

1<template>
2 <argon-button full-width>Button</argon-button>
3</template>
4
5<script>
6import ArgonButton from "@/components/ArgonButton.vue";
7export default {
8  components: {
9   ArgonButton,
10  },
11 };
12</script>

<template>
 <argon-button full-width>Button</argon-button>
</template>

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