Skip to content
This repository was archived by the owner on Mar 17, 2021. It is now read-only.

Commit 7f4b19e

Browse files
romanslonovromanslonov
committed
Update button.md
1 parent 1723f2f commit 7f4b19e

File tree

1 file changed

+80
-36
lines changed

1 file changed

+80
-36
lines changed

‎docs/components/button.md‎

Lines changed: 80 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
# Button <badge text="development" type="warn" />
22

33
## Example
4-
<div class="p-3 border rounded-2 my-3">
5-
<v-button appearance="default">Default</v-button>
6-
<v-button appearance="primary">Primary</v-button>
7-
<v-button appearance="alternative">Alternative</v-button>
8-
<v-button appearance="subtle">Alternative</v-button>
9-
<v-button appearance="success">Success</v-button>
10-
<v-button appearance="danger">Danger</v-button>
4+
<div class="p-3 border rounded-2 my-3 flex flex-wrap">
5+
<v-button class="m-1" appearance="default">Default</v-button>
6+
<v-button class="m-1" appearance="primary">Primary</v-button>
7+
<v-button class="m-1" appearance="alternative">Alternative</v-button>
8+
<v-button class="m-1" appearance="subtle">Alternative</v-button>
9+
<v-button class="m-1" appearance="success">Success</v-button>
10+
<v-button class="m-1" appearance="danger">Danger</v-button>
1111
</div>
1212

13-
``` html
13+
```html
1414
<v-button appearance="default">Default</v-button>
1515
<v-button appearance="primary">Primary</v-button>
1616
<v-button appearance="alternative">Alternative</v-button>
@@ -19,49 +19,89 @@
1919
<v-button appearance="danger">Danger</v-button>
2020
```
2121

22-
<div class="p-3 border rounded-2 my-3">
23-
<v-button loading appearance="default">Default</v-button>
24-
<v-button loading appearance="primary">Primary</v-button>
25-
<v-button loading appearance="alternative">Alternative</v-button>
26-
<v-button loading appearance="subtle">Alternative</v-button>
27-
<v-button loading appearance="success">Success</v-button>
28-
<v-button loading appearance="danger">Danger</v-button>
22+
## Loading
23+
<div class="p-3 border rounded-2 my-3 flex flex-wrap">
24+
<v-button class="m-1" loading appearance="default">Default</v-button>
25+
<v-button class="m-1" loading appearance="primary">Primary</v-button>
26+
<v-button class="m-1" loading appearance="alternative">Alternative</v-button>
27+
<v-button class="m-1" loading appearance="subtle">Alternative</v-button>
28+
<v-button class="m-1" loading appearance="success">Success</v-button>
29+
<v-button class="m-1" loading appearance="danger">Danger</v-button>
2930
</div>
3031

31-
``` html
32+
```html
3233
<v-button loading appearance="default">Default</v-button>
3334
```
3435

35-
<div class="p-3 border rounded-2 my-3">
36-
<v-button disabled appearance="default">Default</v-button>
37-
<v-button disabled appearance="primary">Primary</v-button>
38-
<v-button disabled appearance="alternative">Alternative</v-button>
39-
<v-button disabled appearance="subtle">Alternative</v-button>
40-
<v-button disabled appearance="success">Success</v-button>
41-
<v-button disabled appearance="danger">Danger</v-button>
36+
## Disabled
37+
<div class="p-3 border rounded-2 my-3 flex flex-wrap">
38+
<v-button disabled class="m-1" appearance="default">Default</v-button>
39+
<v-button disabled class="m-1" appearance="primary">Primary</v-button>
40+
<v-button disabled class="m-1" appearance="alternative">Alternative</v-button>
41+
<v-button disabled class="m-1" appearance="subtle">Alternative</v-button>
42+
<v-button disabled class="m-1" appearance="success">Success</v-button>
43+
<v-button disabled class="m-1" appearance="danger">Danger</v-button>
4244
</div>
4345

44-
``` html
46+
```html
4547
<v-button disabled appearance="default">Default</v-button>
4648
```
4749

48-
<div class="p-3 border rounded-2 my-3">
49-
<v-button icon-first appearance="default">
50-
<svg slot="icon" viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
51-
</svg>
52-
Default
50+
## Icon & text
51+
<div class="p-3 border rounded-2 my-3 flex flex-wrap">
52+
<v-button size="3" appearance="primary">
53+
Take a shot
54+
<template v-slot:icon>
55+
<svg viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
56+
</svg>
57+
</template>
5358
</v-button>
54-
<v-button appearance="primary">
55-
Primary
56-
<svg slot="icon" viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
57-
</svg>
59+
</div>
60+
61+
```html
62+
<v-button appearance="primary">
63+
Take a shot
64+
<template v-slot:icon>
65+
<!--icon here-->
66+
</template>
67+
</v-button>
68+
```
69+
70+
## Icon first
71+
<div class="p-3 border rounded-2 my-3 flex flex-wrap">
72+
<v-button size="3" icon-first appearance="primary">
73+
Take a shot
74+
<template v-slot:icon>
75+
<svg viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
76+
</svg>
77+
</template>
5878
</v-button>
5979
</div>
6080

61-
``` html
81+
```html
82+
<v-button icon-first appearance="primary">
83+
Take a shot
84+
<template v-slot:icon>
85+
<!--icon here-->
86+
</template>
87+
</v-button>
88+
```
89+
90+
## Icon only
91+
<div class="p-3 border rounded-2 my-3">
92+
<v-button size="3" appearance="primary">
93+
<template v-slot:icon>
94+
<svg viewBox="0 0 24 24" width="20" height="20"><g fill="currentColor" fill-rule="nonzero"><path d="M7.723 4.552A1 1 0 0 1 8.617 4h6.764a1 1 0 0 1 .895.554L16.997 6H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2.997l.726-1.448zM12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM6 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"></path><path d="M12 16a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path></g>
95+
</svg>
96+
</template>
97+
</v-button>
98+
</div>
99+
100+
```html
62101
<v-button disabled appearance="default">Default</v-button>
63102
```
64103

104+
## Sizes
65105
<div class="p-3 border rounded-2 my-3">
66106
<v-button size="0" appearance="default">Default</v-button>
67107
<v-button size="1" appearance="default">Default</v-button>
@@ -70,8 +110,12 @@
70110
<v-button size="4" appearance="default">Default</v-button>
71111
</div>
72112

73-
``` html
74-
<v-button disabled appearance="default">Default</v-button>
113+
```html
114+
<v-button size="0" appearance="default">Default</v-button>
115+
<v-button size="1" appearance="default">Default</v-button>
116+
<v-button size="2" appearance="default">Default</v-button>
117+
<v-button size="3" appearance="default">Default</v-button>
118+
<v-button size="4" appearance="default">Default</v-button>
75119
```
76120

77121
## Props

0 commit comments

Comments
 (0)