Nuxt Button - Argon

PRO

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

Demo

<template>
 <ArgonButton>Button</ArgonButton>
</template>

1<template>
2 <ArgonButton>Button</ArgonButton>
3</template>

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

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

1<template>
2 <ArgonButton color="success" size="md" variant="contained">Default</ArgonButton>
3 <ArgonButton color="success" size="md" variant="outline">Outline</ArgonButton>
4 <ArgonButton color="success" size="md" variant="gradient">Gradient</ArgonButton>
5 </template>

Sizes

<template>
 <ArgonButton color="success" size="sm">Button</ArgonButton>
 <ArgonButton color="success" size="md">Button</ArgonButton>
 <ArgonButton color="success" size="lg">Button</ArgonButton>
</template>

1<template>
2 <ArgonButton color="success" size="sm">Button</ArgonButton>
3 <ArgonButton color="success" size="md">Button</ArgonButton>
4 <ArgonButton color="success" size="lg">Button</ArgonButton>
5</template>

With Icon

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

1<template>
2 <ArgonButton size="lg">
3  <span class="ni ni-button-play ni-lg me-1" />
4  Button
5 </ArgonButton>
6</template>

Block

<template>
 <ArgonButton full-width>Button</ArgonButton>
</template>

1<template>
2 <ArgonButton full-width>Button</ArgonButton>
3</template>