UNPKG

19.4 kBMarkdownView Raw
1The cf-buttons component provides extensions to the basic button styles for
2Capital Framework.
3
4[`cf-core`](../cf-core) and [`cf-icons`](../cf-icons) components are all
5dependencies 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
32Theme variables for setting the color and sizes throughout the project.
33Overwrite them in your own project by duplicating the variable `@key: value`.
34
35### Color variables
36
37Color 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
82The default button is an atom in our atomic design standards.
83You can apply the `a-btn` class to a link, button and submit input field
84to receive the atomic button styles.
85
86For 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```