1 | The cf-buttons component provides extensions to the basic button styles for
|
2 | Capital Framework.
|
3 |
|
4 | [`cf-core`](../cf-core) and [`cf-icons`](../cf-icons) components are all
|
5 | dependencies of this component.
|
6 |
|
7 | > NOTE: If you use `cf-buttons.less` directly,
|
8 | be sure to run the file through
|
9 | [Autoprefixer](https://github.com/postcss/autoprefixer),
|
10 | or your compiled Capital Framework CSS will
|
11 | not work perfectly in older browsers.
|
12 |
|
13 | ## Table of contents
|
14 |
|
15 | - [Variables](#variables)
|
16 | - [Color variables](#color-variables)
|
17 | - [Sizing variables](#sizing-variables)
|
18 | - [Atoms](#atoms)
|
19 | - [Default button](#default-button)
|
20 | - [Secondary button](#secondary-button)
|
21 | - [Destructive action button](#destructive-action-button)
|
22 | - [Disabled button](#disabled-button)
|
23 | - [Super button](#super-button)
|
24 | - [Full-width buttons on x-small screens](#full-width-buttons-on-x-small-screens)
|
25 | - [Button links](#button-links)
|
26 | - [Icon buttons](#icon-buttons)
|
27 | - [Molecules](#molecules)
|
28 | - [Button group](#button-group)
|
29 |
|
30 | ## Variables
|
31 |
|
32 | Theme variables for setting the color and sizes throughout the project.
|
33 | Overwrite them in your own project by duplicating the variable `@key: value`.
|
34 |
|
35 | ### Color variables
|
36 |
|
37 | Color variables referenced in comments are from [cf-core cf-brand-colors.less](https://github.com/cfpb/capital-framework/blob/master/src/cf-core/src/cf-brand-colors.less).
|
38 |
|
39 | ```
|
40 | // .btn
|
41 | @btn-text: @white;
|
42 | @btn-bg: @pacific;
|
43 | @btn-bg-hover: @pacific-80;
|
44 | @btn-bg-active: @navy-80;
|
45 |
|
46 | // .btn__secondary
|
47 | @btn__secondary-text: @white;
|
48 | @btn__secondary-bg: @gray;
|
49 | @btn__secondary-bg-hover: @gray-80;
|
50 | @btn__secondary-bg-active: @dark-gray;
|
51 |
|
52 | // .btn__warning
|
53 | @btn__warning-text: @white;
|
54 | @btn__warning-bg: @red;
|
55 | @btn__warning-bg-hover: @red-80;
|
56 | @btn__warning-bg-active: @dark-red;
|
57 |
|
58 | // .btn__disabled
|
59 | @btn__disabled-text: @gray;
|
60 | @btn__disabled-bg: @gray-20;
|
61 | @btn__disabled-outline: @gray-20;
|
62 | ```
|
63 |
|
64 | ### Sizing variables
|
65 |
|
66 | ```
|
67 | // .btn
|
68 | @btn-font-size: @base-font-size-px;
|
69 | @btn-border-radius-size: 4px;
|
70 | @btn-v-padding: 8px;
|
71 | @btn-h-padding: 14px;
|
72 | @btn-v-padding-modifier-ie: 0.8;
|
73 |
|
74 | // .btn__super
|
75 | @btn__super-font-size: 18px;
|
76 | ```
|
77 |
|
78 | ## Atoms
|
79 |
|
80 | ### Default Button
|
81 |
|
82 | The default button is an atom in our atomic design standards.
|
83 | You can apply the `a-btn` class to a link, button and submit input field
|
84 | to receive the atomic button styles.
|
85 |
|
86 | For accessibility reasons, use the semantic `<button>` instead of a link when possible.
|
87 |
|
88 | #### Default state
|
89 |
|
90 | <a href="#" class="a-btn" title="Test button">Anchor Tag</a>
|
91 | <button class="a-btn" title="Test button">Button Tag</button>
|
92 | <input type="submit" value="Input Tag" class="a-btn">
|
93 |
|
94 | ```
|
95 | <a href="#" class="a-btn" title="Test button">Anchor Tag</a>
|
96 | <button class="a-btn" title="Test button">Button Tag</button>
|
97 | <input type="submit" value="Input Tag" class="a-btn">
|
98 | ```
|
99 |
|
100 | #### Hovered state
|
101 |
|
102 | <a href="#" class="a-btn hover" title="Test button">Anchor Tag</a>
|
103 | <button class="a-btn hover" title="Test button">Button Tag</button>
|
104 | <input type="submit" value="Input Tag" class="a-btn hover">
|
105 |
|
106 | ```
|
107 | <a href="#" class="a-btn hover" title="Test button">Anchor Tag</a>
|
108 | <button class="a-btn hover" title="Test button">Button Tag</button>
|
109 | <input type="submit" value="Input Tag" class="a-btn hover">
|
110 | ```
|
111 |
|
112 | #### Focused state
|
113 |
|
114 | <a href="#" class="a-btn focus" title="Test button">Anchor Tag</a>
|
115 | <button class="a-btn focus" title="Test button">Button Tag</button>
|
116 | <input type="submit" value="Input Tag" class="a-btn focus">
|
117 |
|
118 | ```
|
119 | <a href="#" class="a-btn focus" title="Test button">Anchor Tag</a>
|
120 | <button class="a-btn focus" title="Test button">Button Tag</button>
|
121 | <input type="submit" value="Input Tag" class="a-btn focus">
|
122 | ```
|
123 |
|
124 | #### Active state
|
125 |
|
126 | <a href="#" class="a-btn active" title="Test button">Anchor Tag</a>
|
127 | <button class="a-btn active" title="Test button">Button Tag</button>
|
128 | <input type="submit" value="Input Tag" class="a-btn active">
|
129 |
|
130 | ```
|
131 | <a href="#" class="a-btn active" title="Test button">Anchor Tag</a>
|
132 | <button class="a-btn active" title="Test button">Button Tag</button>
|
133 | <input type="submit" value="Input Tag" class="a-btn active">
|
134 | ```
|
135 |
|
136 | ### Secondary button
|
137 |
|
138 | #### Default state
|
139 |
|
140 | <a href="#" class="a-btn a-btn__secondary">Anchor Tag</a>
|
141 | <button class="a-btn a-btn__secondary" title="Test button">Button Tag</button>
|
142 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary">
|
143 |
|
144 | ```
|
145 | <a href="#" class="a-btn a-btn__secondary">Anchor Tag</a>
|
146 | <button class="a-btn a-btn__secondary" title="Test button">Button Tag</button>
|
147 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary">
|
148 | ```
|
149 |
|
150 | #### Hovered state
|
151 |
|
152 | <a href="#" class="a-btn a-btn__secondary hover">Anchor Tag</a>
|
153 | <button class="a-btn a-btn__secondary hover" title="Test button">
|
154 | Button Tag
|
155 | </button>
|
156 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary hover">
|
157 |
|
158 | ```
|
159 | <a href="#" class="a-btn a-btn__secondary hover">Anchor Tag</a>
|
160 | <button class="a-btn a-btn__secondary hover" title="Test button">
|
161 | Button Tag
|
162 | </button>
|
163 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary hover">
|
164 | ```
|
165 |
|
166 | #### Focused state
|
167 |
|
168 | <a href="#" class="a-btn a-btn__secondary focus">Anchor Tag</a>
|
169 | <button class="a-btn a-btn__secondary focus" title="Test button">
|
170 | Button Tag
|
171 | </button>
|
172 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary focus">
|
173 |
|
174 | ```
|
175 | <a href="#" class="a-btn a-btn__secondary focus">Anchor Tag</a>
|
176 | <button class="a-btn a-btn__secondary focus" title="Test button">
|
177 | Button Tag
|
178 | </button>
|
179 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary focus">
|
180 | ```
|
181 |
|
182 | #### Active state
|
183 |
|
184 | <a href="#" class="a-btn a-btn__secondary active">Anchor Tag</a>
|
185 | <button class="a-btn a-btn__secondary active" title="Test button">
|
186 | Button Tag
|
187 | </button>
|
188 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary active">
|
189 |
|
190 | ```
|
191 | <a href="#" class="a-btn a-btn__secondary active">Anchor Tag</a>
|
192 | <button class="a-btn a-btn__secondary active" title="Test button">
|
193 | Button Tag
|
194 | </button>
|
195 | <input type="submit" value="Input Tag" class="a-btn a-btn__secondary active">
|
196 | ```
|
197 |
|
198 | ### Destructive action button
|
199 |
|
200 | #### Default state
|
201 |
|
202 | <a href="#" class="a-btn a-btn__warning">Anchor Tag</a>
|
203 | <button class="a-btn a-btn__warning" title="Test button">
|
204 | Button Tag
|
205 | </button>
|
206 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning">
|
207 |
|
208 | ```
|
209 | <a href="#" class="a-btn a-btn__warning">Anchor Tag</a>
|
210 | <button class="a-btn a-btn__warning" title="Test button">
|
211 | Button Tag
|
212 | </button>
|
213 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning">
|
214 | ```
|
215 |
|
216 | #### Hovered state
|
217 |
|
218 | <a href="#" class="a-btn a-btn__warning hover">Anchor Tag</a>
|
219 | <button class="a-btn a-btn__warning hover" title="Test button">
|
220 | Button Tag
|
221 | </button>
|
222 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning hover">
|
223 |
|
224 | ```
|
225 | <a href="#" class="a-btn a-btn__warning hover">Anchor Tag</a>
|
226 | <button class="a-btn a-btn__warning hover" title="Test button">
|
227 | Button Tag
|
228 | </button>
|
229 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning hover">
|
230 | ```
|
231 |
|
232 | #### Focused state
|
233 |
|
234 | <a href="#" class="a-btn a-btn__warning focus">Anchor Tag</a>
|
235 | <button class="a-btn a-btn__warning focus" title="Test button">
|
236 | Button Tag
|
237 | </button>
|
238 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning focus">
|
239 |
|
240 | ```
|
241 | <a href="#" class="a-btn a-btn__warning focus">Anchor Tag</a>
|
242 | <button class="a-btn a-btn__warning focus" title="Test button">
|
243 | Button Tag
|
244 | </button>
|
245 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning focus">
|
246 | ```
|
247 |
|
248 | #### Active state
|
249 |
|
250 | <a href="#" class="a-btn a-btn__warning active">Anchor Tag</a>
|
251 | <button class="a-btn a-btn__warning active" title="Test button">
|
252 | Button Tag
|
253 | </button>
|
254 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning active">
|
255 |
|
256 | ```
|
257 | <a href="#" class="a-btn a-btn__warning active">Anchor Tag</a>
|
258 | <button class="a-btn a-btn__warning active" title="Test button">
|
259 | Button Tag
|
260 | </button>
|
261 | <input type="submit" value="Input Tag" class="a-btn a-btn__warning active">
|
262 | ```
|
263 |
|
264 | ### Disabled button
|
265 |
|
266 | #### Default/hovered/active state
|
267 |
|
268 | <a href="#" class="a-btn a-btn__disabled">Anchor Tag</a>
|
269 | <button class="a-btn a-btn__disabled" title="Test button">Button Tag</button>
|
270 | <input type="submit" value="Input Tag" class="a-btn a-btn__disabled">
|
271 | <button class="a-btn" disabled title="Test button">
|
272 | Button Tag w/ disabled attr
|
273 | </button>
|
274 |
|
275 | ```
|
276 | <a href="#" class="a-btn a-btn__disabled">Anchor Tag</a>
|
277 | <button class="a-btn a-btn__disabled" title="Test button">Button Tag</button>
|
278 | <input type="submit" value="Input Tag" class="a-btn a-btn__disabled">
|
279 | <button class="a-btn" disabled title="Test button">
|
280 | Button Tag w/ disabled attr
|
281 | </button>
|
282 | ```
|
283 |
|
284 | #### Focused state
|
285 |
|
286 | <a href="#" class="a-btn a-btn__disabled focus">Anchor Tag</a>
|
287 | <button class="a-btn a-btn__disabled focus" title="Test button">Button Tag</button>
|
288 | <input type="submit" value="Input Tag" class="a-btn a-btn__disabled focus">
|
289 | <button class="a-btn focus" disabled title="Test button">
|
290 | Button Tag w/ disabled attr
|
291 | </button>
|
292 |
|
293 | ```
|
294 | <a href="#" class="a-btn a-btn__disabled focus">Anchor Tag</a>
|
295 | <button class="a-btn a-btn__disabled focus" title="Test button">Button Tag</button>
|
296 | <input type="submit" value="Input Tag" class="a-btn a-btn__disabled focus">
|
297 | <button class="a-btn focus" disabled title="Test button">
|
298 | Button Tag w/ disabled attr
|
299 | </button>
|
300 | ```
|
301 |
|
302 | ### Super button
|
303 |
|
304 | #### Default state
|
305 |
|
306 | <a href="#" class="a-btn a-btn__super">Anchor Tag</a>
|
307 | <button class="a-btn a-btn__super" title="Test button">Button Tag</button>
|
308 | <input type="submit" value="Input Tag" class="a-btn a-btn__super">
|
309 |
|
310 | ```
|
311 | <a href="#" class="a-btn a-btn__super">Anchor Tag</a>
|
312 | <button class="a-btn a-btn__super" title="Test button">Button Tag</button>
|
313 | <input type="submit" value="Input Tag" class="a-btn a-btn__super">
|
314 | ```
|
315 |
|
316 | #### Hovered state
|
317 |
|
318 | <a href="#" class="a-btn a-btn__super hover">Anchor Tag</a>
|
319 | <button class="a-btn a-btn__super hover" title="Test button">
|
320 | Button Tag
|
321 | </button>
|
322 | <input type="submit" value="Input Tag" class="a-btn a-btn__super hover">
|
323 |
|
324 | ```
|
325 | <a href="#" class="a-btn a-btn__super hover">Anchor Tag</a>
|
326 | <button class="a-btn a-btn__super hover" title="Test button">
|
327 | Button Tag
|
328 | </button>
|
329 | <input type="submit" value="Input Tag" class="a-btn a-btn__super hover">
|
330 | ```
|
331 |
|
332 | #### Focused state
|
333 |
|
334 | <a href="#" class="a-btn a-btn__super focus">Anchor Tag</a>
|
335 | <button class="a-btn a-btn__super focus" title="Test button">
|
336 | Button Tag
|
337 | </button>
|
338 | <input type="submit" value="Input Tag" class="a-btn a-btn__super focus">
|
339 |
|
340 | ```
|
341 | <a href="#" class="a-btn a-btn__super focus">Anchor Tag</a>
|
342 | <button class="a-btn a-btn__super focus" title="Test button">
|
343 | Button Tag
|
344 | </button>
|
345 | <input type="submit" value="Input Tag" class="a-btn a-btn__super focus">
|
346 | ```
|
347 |
|
348 | #### Active state
|
349 |
|
350 | <a href="#" class="a-btn a-btn__super active">Anchor Tag</a>
|
351 | <button class="a-btn a-btn__super active" title="Test button">
|
352 | Button Tag
|
353 | </button>
|
354 | <input type="submit" value="Input Tag" class="a-btn a-btn__super active">
|
355 |
|
356 | ```
|
357 | <a href="#" class="a-btn a-btn__super active">Anchor Tag</a>
|
358 | <button class="a-btn a-btn__super active" title="Test button">
|
359 | Button Tag
|
360 | </button>
|
361 | <input type="submit" value="Input Tag" class="a-btn a-btn__super active">
|
362 | ```
|
363 |
|
364 | ### Full-width buttons on x-small screens
|
365 |
|
366 | _Reduce screen size to see these in action_
|
367 |
|
368 | <a href="#" class="a-btn a-btn__full-on-xs">Anchor Tag</a>
|
369 |
|
370 | <button class="a-btn a-btn__full-on-xs" title="Test button">
|
371 | Button Tag
|
372 | </button>
|
373 |
|
374 | <input type="submit" value="Input Tag" class="a-btn a-btn__full-on-xs">
|
375 |
|
376 | ```
|
377 | <a href="#" class="a-btn a-btn__full-on-xs">Anchor Tag</a>
|
378 | <button class="a-btn a-btn__full-on-xs" title="Test button">
|
379 | Button Tag
|
380 | </button>
|
381 | <input type="submit" value="Input Tag" class="a-btn a-btn__full-on-xs">
|
382 | ```
|
383 |
|
384 | ### Button links
|
385 |
|
386 | #### Default state
|
387 |
|
388 | <button href="#" class="a-btn a-btn__link">Button Link</button>
|
389 | <button href="#" class="a-btn a-btn__link a-btn__secondary">
|
390 | Secondary Button Link
|
391 | </button>
|
392 | <button href="#" class="a-btn a-btn__link a-btn__warning">Warning Button Link</button>
|
393 |
|
394 | ```
|
395 | <button href="#" class="a-btn a-btn__link">Button Link</button>
|
396 | <button href="#" class="a-btn a-btn__link a-btn__secondary">
|
397 | Secondary Button Link
|
398 | </button>
|
399 | <button href="#" class="a-btn a-btn__link a-btn__warning">Warning Button Link</button>
|
400 | ```
|
401 |
|
402 | #### Hovered state
|
403 |
|
404 | <button href="#" class="a-btn a-btn__link hover">Button Link</button>
|
405 | <button href="#" class="a-btn a-btn__link a-btn__secondary hover">
|
406 | Secondary Button Link
|
407 | </button>
|
408 | <button href="#" class="a-btn a-btn__link a-btn__warning hover">Warning Button Link</button>
|
409 |
|
410 | ```
|
411 | <button href="#" class="a-btn a-btn__link hover">Button Link</button>
|
412 | <button href="#" class="a-btn a-btn__link a-btn__secondary hover">
|
413 | Secondary Button Link
|
414 | </button>
|
415 | <button href="#" class="a-btn a-btn__link a-btn__warning hover">Warning Button Link</button>
|
416 | ```
|
417 |
|
418 | #### Focus state
|
419 |
|
420 | <button href="#" class="a-btn a-btn__link focus">Button Link</button>
|
421 | <button href="#" class="a-btn a-btn__link a-btn__secondary focus">
|
422 | Secondary Button Link
|
423 | </button>
|
424 | <button href="#" class="a-btn a-btn__link a-btn__warning focus">Warning Button Link</button>
|
425 |
|
426 | ```
|
427 | <button href="#" class="a-btn a-btn__link focus">Button Link</button>
|
428 | <button href="#" class="a-btn a-btn__link a-btn__secondary focus">
|
429 | Secondary Button Link
|
430 | </button>
|
431 | <button href="#" class="a-btn a-btn__link a-btn__warning focus">Warning Button Link</button>
|
432 | ```
|
433 |
|
434 | #### Active state
|
435 |
|
436 | <button href="#" class="a-btn a-btn__link active">Button Link</button>
|
437 | <button href="#" class="a-btn a-btn__link a-btn__secondary active">
|
438 | Secondary Button Link
|
439 | </button>
|
440 | <button href="#" class="a-btn a-btn__link a-btn__warning active">Warning Button Link</button>
|
441 |
|
442 | ```
|
443 | <button href="#" class="a-btn a-btn__link active">Button Link</button>
|
444 | <button href="#" class="a-btn a-btn__link a-btn__secondary active">
|
445 | Secondary Button Link
|
446 | </button>
|
447 | <button href="#" class="a-btn a-btn__link a-btn__warning active">Warning Button Link</button>
|
448 | ```
|
449 |
|
450 | ### Icon buttons
|
451 |
|
452 | #### Button with icon on the left
|
453 |
|
454 | <button class="a-btn">
|
455 | <span class="a-btn_icon
|
456 | a-btn_icon__on-left
|
457 | cf-icon
|
458 | cf-icon__before
|
459 | cf-icon-delete"></span>
|
460 | Close
|
461 | </button>
|
462 |
|
463 | <button class="a-btn a-btn__secondary">
|
464 | <span class="a-btn_icon
|
465 | a-btn_icon__on-left
|
466 | cf-icon
|
467 | cf-icon__before
|
468 | cf-icon-delete"></span>
|
469 | Close
|
470 | </button> - Secondary button
|
471 |
|
472 | <button class="a-btn a-btn__warning">
|
473 | <span class="a-btn_icon
|
474 | a-btn_icon__on-left
|
475 | cf-icon
|
476 | cf-icon__before
|
477 | cf-icon-delete"></span>
|
478 | Close
|
479 | </button> - Warning button
|
480 |
|
481 | <button class="a-btn a-btn__disabled">
|
482 | <span class="a-btn_icon
|
483 | a-btn_icon__on-left
|
484 | cf-icon
|
485 | cf-icon__before
|
486 | cf-icon-delete"></span>
|
487 | Close
|
488 | </button> - Disabled button
|
489 |
|
490 | ```
|
491 | <button class="a-btn">
|
492 | <span class="a-btn_icon
|
493 | a-btn_icon__on-left
|
494 | cf-icon
|
495 | cf-icon__before
|
496 | cf-icon-delete"></span>
|
497 | Close
|
498 | </button>
|
499 |
|
500 | <button class="a-btn a-btn__secondary">
|
501 | <span class="a-btn_icon
|
502 | a-btn_icon__on-left
|
503 | cf-icon
|
504 | cf-icon__before
|
505 | cf-icon-delete"></span>
|
506 | Close
|
507 | </button> - Secondary button
|
508 |
|
509 | <button class="a-btn a-btn__warning">
|
510 | <span class="a-btn_icon
|
511 | a-btn_icon__on-left
|
512 | cf-icon
|
513 | cf-icon__before
|
514 | cf-icon-delete"></span>
|
515 | Close
|
516 | </button> - Warning button
|
517 |
|
518 | <button class="a-btn a-btn__disabled">
|
519 | <span class="a-btn_icon
|
520 | a-btn_icon__on-left
|
521 | cf-icon
|
522 | cf-icon__before
|
523 | cf-icon-delete"></span>
|
524 | Close
|
525 | </button> - Disabled button
|
526 | ```
|
527 |
|
528 | #### Button with icon on the right
|
529 |
|
530 | <button class="a-btn">
|
531 | Close
|
532 | <span class="a-btn_icon
|
533 | a-btn_icon__on-right
|
534 | cf-icon
|
535 | cf-icon__after
|
536 | cf-icon-delete"></span>
|
537 | </button>
|
538 |
|
539 | <button class="a-btn a-btn__secondary">
|
540 | Close
|
541 | <span class="a-btn_icon
|
542 | a-btn_icon__on-right
|
543 | cf-icon
|
544 | cf-icon__after
|
545 | cf-icon-delete"></span>
|
546 | </button> - Secondary button
|
547 |
|
548 | <button class="a-btn a-btn__warning">
|
549 | Close
|
550 | <span class="a-btn_icon
|
551 | a-btn_icon__on-right
|
552 | cf-icon
|
553 | cf-icon__after
|
554 | cf-icon-delete"></span>
|
555 | </button> - Warning button
|
556 |
|
557 | <button class="a-btn a-btn__disabled">
|
558 | Close
|
559 | <span class="a-btn_icon
|
560 | a-btn_icon__on-right
|
561 | cf-icon
|
562 | cf-icon__after
|
563 | cf-icon-delete"></span>
|
564 | </button> - Disabled button
|
565 |
|
566 | ```
|
567 | <button class="a-btn">
|
568 | Close
|
569 | <span class="a-btn_icon
|
570 | a-btn_icon__on-right
|
571 | cf-icon
|
572 | cf-icon__after
|
573 | cf-icon-delete"></span>
|
574 | </button>
|
575 |
|
576 | <button class="a-btn a-btn__secondary">
|
577 | Close
|
578 | <span class="a-btn_icon
|
579 | a-btn_icon__on-right
|
580 | cf-icon
|
581 | cf-icon__after
|
582 | cf-icon-delete"></span>
|
583 | </button> - Secondary button
|
584 |
|
585 | <button class="a-btn a-btn__warning">
|
586 | Close
|
587 | <span class="a-btn_icon
|
588 | a-btn_icon__on-right
|
589 | cf-icon
|
590 | cf-icon__after
|
591 | cf-icon-delete"></span>
|
592 | </button> - Warning button
|
593 |
|
594 | <button class="a-btn a-btn__disabled">
|
595 | Close
|
596 | <span class="a-btn_icon
|
597 | a-btn_icon__on-right
|
598 | cf-icon
|
599 | cf-icon__after
|
600 | cf-icon-delete"></span>
|
601 | </button> - Disabled button
|
602 | ```
|
603 |
|
604 | #### Button with an animated icon
|
605 |
|
606 | <button class="a-btn a-btn__disabled">
|
607 | Submit your complaint
|
608 | <span class="a-btn_icon
|
609 | a-btn_icon__on-right
|
610 | cf-icon
|
611 | cf-icon__after
|
612 | cf-icon-update
|
613 | cf-icon__spin"></span>
|
614 | </button>
|
615 |
|
616 | ```
|
617 | <button class="a-btn">
|
618 | Submit your complaint
|
619 | <span class="a-btn_icon
|
620 | a-btn_icon__on-right
|
621 | cf-icon
|
622 | cf-icon__after
|
623 | cf-icon-update
|
624 | cf-icon__spin"></span>
|
625 | </button>
|
626 | ```
|
627 |
|
628 | ## Molecules
|
629 |
|
630 | ### Button group
|
631 |
|
632 | #### With default buttons
|
633 |
|
634 | <div class="m-btn-group">
|
635 | <button class="a-btn">Yes</button>
|
636 | <button class="a-btn">No</button>
|
637 | <button class="a-btn">Maybe So</button>
|
638 | </div>
|
639 |
|
640 | ```
|
641 | <div class="m-btn-group">
|
642 | <button class="a-btn">Yes</button>
|
643 | <button class="a-btn">No</button>
|
644 | <button class="a-btn">Maybe So</button>
|
645 | </div>
|
646 | ```
|
647 |
|
648 | #### With super buttons
|
649 |
|
650 | <div class="m-btn-group">
|
651 | <button class="a-btn a-btn__super">Yes</button>
|
652 | <button class="a-btn a-btn__super">No</button>
|
653 | <button class="a-btn a-btn__super">Maybe So</button>
|
654 | </div>
|
655 |
|
656 | ```
|
657 | <div class="m-btn-group">
|
658 | <button class="a-btn a-btn__super">Yes</button>
|
659 | <button class="a-btn a-btn__super">No</button>
|
660 | <button class="a-btn a-btn__super">Maybe So</button>
|
661 | </div>
|
662 | ```
|