Buttons

TIP

To use the icon component (fontawesome) in Vue.js see the documentation

Basic usage

<template>
    <mu-container>
        <mu-row>
            <mu-button>Default</mu-button>
            <mu-button type="primary">Primary</mu-button>
            <mu-button type="success">Success</mu-button>
            <mu-button type="info">Info</mu-button>
            <mu-button type="warning">Warning</mu-button>
            <mu-button type="danger">Danger</mu-button>
        </mu-row>
        <mu-row>
            <mu-button plain="">Plain</mu-button>
            <mu-button type="primary" plain="">Primary</mu-button>
            <mu-button type="success" plain="">Success</mu-button>
            <mu-button type="info" plain="">Info</mu-button>
            <mu-button type="warning" plain="">Warning</mu-button>
            <mu-button type="danger" plain="">Danger</mu-button>
        </mu-row>
        <mu-row>
            <mu-button round="">Round</mu-button>
            <mu-button type="primary" round="">Primary</mu-button>
            <mu-button type="success" round="">Success</mu-button>
            <mu-button type="info" round="">Info</mu-button>
            <mu-button type="warning" round="">Warning</mu-button>
            <mu-button type="danger" round="">Danger</mu-button>
        </mu-row>
        <mu-row>
            <mu-button circle=""></mu-button>
            <mu-button type="primary" icon="el-icon-edit" circle=""></mu-button>
            <mu-button type="success" icon="el-icon-check" circle=""></mu-button>
            <mu-button type="info" icon="el-icon-message" circle=""></mu-button>
            <mu-button type="warning" icon="el-icon-star-off" circle=""></mu-button>
            <mu-button type="danger" icon="el-icon-delete" circle=""></mu-button>
        </mu-row>
        <mu-row>
            <mu-button circle="">
                <font-awesome-icon :icon="['fal', 'search']" />
            </mu-button>
            <mu-button type="primary" circle="">
                <font-awesome-icon :icon="['fal', 'edit']" />
            </mu-button>
            <mu-button type="success" circle="">
                <font-awesome-icon :icon="['fal', 'check']" />
            </mu-button>
            <mu-button type="info" circle="">
                <font-awesome-icon :icon="['fal', 'envelope']" />
            </mu-button>
            <mu-button type="warning" circle="">
                <font-awesome-icon :icon="['fal', 'star']" />
            </mu-button>
            <mu-button type="danger" circle="">
                <font-awesome-icon :icon="['fal', 'trash-alt']" />
            </mu-button>
        </mu-row>   
    </mu-container>
</template>

<script>
    export default {
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61