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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'buttons'
- var parent = 'elements'
- var title = 'Buttons - Elements - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('buttons', 'Buttons')
include ../_layout/_ad-g.pug
p Buttons include simple button styles for actions in different types and sizes.
.docs-demo.columns
.column.col-12
button.btn default button
button.btn.btn-primary primary button
button.btn.btn-link link button
p
| Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button.
| There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<button class="btn">default button</button>
<button class="btn btn-primary">primary button</button>
<button class="btn btn-link">link button</button>
+docs-subheading('buttons-colors', 'Button colors')
.docs-demo.columns
.column.col-12
button.btn.btn-success success button
button.btn.btn-error error button
p
| Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
| If you need more button colors, please use
a(href="getting-started.html#variables-buttons") button mixins
| to create your own button color variants.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<button class="btn btn-success">success button</button>
<button class="btn btn-error">error button</button>
+docs-subheading('buttons-sizes', 'Button sizes')
.docs-demo.columns
.column.col-12
button.btn.btn-primary.btn-lg
| large
i.icon.icon-arrow-down
button.btn.btn-primary.btn-lg large button
.column.col-12
button.btn.btn-primary
| normal
i.icon.icon-arrow-down
button.btn.btn-primary normal button
.column.col-12
button.btn.btn-primary.btn-sm
| small
i.icon.icon-arrow-down
button.btn.btn-primary.btn-sm small button
p
| Add the #[code btn-sm] or #[code btn-lg] class for small or large button size.
| Also, you can add the #[code btn-block] class for a full-width button.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<button class="btn btn-lg">large button</button>
<button class="btn btn-sm">small button</button>
<button class="btn btn-block">block button</button>
<button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
<button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
<button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
p
| Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB).
.docs-demo.columns
.column.col-xs-12
button.btn.btn-action.btn-primary.btn-lg
i.icon.icon-menu
button.btn.btn-action.btn-primary
i.icon.icon-menu
button.btn.btn-action.btn-primary.btn-sm
i.icon.icon-menu
.column.col-xs-12
button.btn.btn-action.btn-primary.btn-lg.s-circle
i.icon.icon-arrow-up
button.btn.btn-action.btn-primary.s-circle
i.icon.icon-arrow-up
button.btn.btn-action.btn-primary.btn-sm.s-circle
i.icon.icon-arrow-up
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
<button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
+docs-subheading('buttons-states', 'Button states')
p
| Add the #[code active] class for active button state style.
.docs-demo.columns
.column.col-12
button.btn.active default active
button.btn.btn-primary.active primary active
button.btn.btn-link.active link active
p
| Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
.docs-demo.columns
.column.col-12
button.btn.disabled(tabindex="-1") default disabled
button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
button.btn.btn-link(disabled="" tabindex="-1") link disabled
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- buttons with disabled state -->
<button class="btn disabled" tabindex="-1">disabled button</button>
<button class="btn" disabled tabindex="-1">disabled button</button>
p
| A button with the #[code loading] class can show loading indicator.
.docs-demo.columns
.column.col-12
button.btn.loading default button
button.btn.btn-primary.loading primary button
button.btn.btn-link.loading link button
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- buttons with loading state -->
<button class="btn loading">button</button>
<button class="btn btn-primary loading">primary button</button>
+docs-subheading('buttons-groups', 'Button groups')
.docs-demo.columns
.column.col-6.col-md-12
.btn-group
button.btn first button
button.btn second button
button.btn third button
.column.col-6.col-md-12
.btn-group.btn-group-block
button.btn.btn-primary first button
button.btn.btn-primary second button
button.btn.btn-primary third button
.column.col-6.col-md-12
.btn-group
button.btn.btn-sm.active first button
button.btn.btn-sm second button
button.btn.btn-sm third button
.column.col-6.col-md-12
.btn-group.btn-group-block
button.btn.btn-primary.btn-sm.active first button
button.btn.btn-primary.btn-sm second button
button.btn.btn-primary.btn-sm third button
p
| If you want to use buttons as a group, add the #[code btn-group] class to the container.
| You can add the #[code btn-group-block] class for a full-width button group.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<div class="btn-group btn-group-block">
<button class="btn">first button</button>
<button class="btn">second button</button>
<button class="btn">third button</button>
</div>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
