Vue Button - Material

PRO

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

Demo

<script setup>
// Vue Material Kit 2 component
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
  <MaterialButton>Default</MaterialButton>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialButton from "@/components/MaterialButton.vue";
4</script>
5<template>
6  <MaterialButton>Default</MaterialButton>
7</template>

Props Information

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

Variants

<script setup>
// Vue Material Kit 2 component
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
 <MaterialButton>Default</MaterialButton>
 <MaterialButton variant="gradient" color="success">Gradient</MaterialButton>
 <MaterialButton variant="outline" color="success">Outline</MaterialButton>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialButton from "@/components/MaterialButton.vue";
4</script>
5<template>
6 <MaterialButton>Default</MaterialButton>
7 <MaterialButton variant="gradient" color="success">Gradient</MaterialButton>
8 <MaterialButton variant="outline" color="success">Outline</MaterialButton>
9</template>

Sizes

<script setup>
// Vue Material Kit 2 component
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
 <MaterialButton size="sm">Button</MaterialButton>
 <MaterialButton size="md">Button</MaterialButton>
 <MaterialButton size="lg">Button</MaterialButton>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialButton from "@/components/MaterialButton.vue";
4</script>
5<template>
6 <MaterialButton size="sm">Button</MaterialButton>
7 <MaterialButton size="md">Button</MaterialButton>
8 <MaterialButton size="lg">Button</MaterialButton>
9</template>

With Icon

<script setup>
// Vue Material Kit 2 component
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
 <MaterialButton size="lg" class="btn-icon mx-2">
 <div class="d-flex align-items-center">
  <i class="material-icons me-2" aria-hidden="true">favorite</i>
  Icon Left
 </div>
 </MaterialButton>

 <MaterialButton size="lg" class="btn-icon mx-2">
 <div class="d-flex align-items-center">
  Icon Right
  <i class="material-icons ms-2" aria-hidden="true">favorite</i>
 </div>
 </MaterialButton>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialButton from "@/components/MaterialButton.vue";
4</script>
5<template>
6 <MaterialButton size="lg" class="btn-icon mx-2">
7 <div class="d-flex align-items-center">
8  <i class="material-icons me-2" aria-hidden="true">favorite</i>
9  Icon Left
10 </div>
11 </MaterialButton>
12
13 <MaterialButton size="lg" class="btn-icon mx-2">
14 <div class="d-flex align-items-center">
15  Icon Right
16  <i class="material-icons ms-2" aria-hidden="true">favorite</i>
17 </div>
18 </MaterialButton>
19</template>

Block

<script setup>
// Vue Material Kit 2 component
import MaterialButton from "@/components/MaterialButton.vue";
</script>
<template>
 <MaterialButton fullWidth>Button</MaterialButton>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialButton from "@/components/MaterialButton.vue";
4</script>
5<template>
6 <MaterialButton fullWidth>Button</MaterialButton>
7</template>