Vue Button - Material

PRO

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

Demo

<template>
 <material-button>Button</material-button>
</template>

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

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

Props Information

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

Variants

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

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

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

Sizes

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

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

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

With Icon

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

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

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

Block

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

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

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