ExcitedUIButton #
Basic usage
Use type, color, icon, size to define Button's style.
vue
<template>
<div class="mb-2">
<ExButton type="default">default</ExButton>
<ExButton type="primary">primary</ExButton>
<ExButton type="success">success</ExButton>
<ExButton type="warning">warning</ExButton>
<ExButton type="danger">danger</ExButton>
<ExButton type="info">info</ExButton>
<ExButton color="gray">gray</ExButton>
<ExButton color="pink">pink</ExButton>
<ExButton color="red" outline>red-outline</ExButton>
<ExButton outline>outline</ExButton>
<ExButton square>square</ExButton>
</div>
<div class="mb-2">
<ExButton size="small">small</ExButton>
<ExButton>default</ExButton>
<ExButton size="medium">medium</ExButton>
<ExButton size="large">large</ExButton>
<ExButton class="text-3xl">text-3xl</ExButton>
</div>
<div class="mb-2">
<ExButton color="blue" icon="search">search</ExButton>
<ExButton color="green" icon="edit">edit</ExButton>
<ExButton color="gray" icon="check">check</ExButton>
<ExButton color="orange" icon="message">message</ExButton>
<ExButton color="red" disabled icon="delete">delete</ExButton>
</div>
</template>
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
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
Icons #
Use icons to add more meaning to Button.
The default icon set: https://icon-sets.iconify.design/ic
Use the `icon` attribute to add icon.
vue
<template>
<div class="flex flex-row">
<ExButton icon="edit" plain></ExButton>
<ExButton icon="delete" plain></ExButton>
<ExButton icon="share" plain></ExButton>
<ExButton plain icon="search">search</ExButton>
</div>
</template>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8