Active Buttons
Buttons that allow the user to take action on a page.
Examples
button-sm
70px x 45px
button-md
135px x 45px
button-lg
250px x 45px
Code (Colored)
<button type="button" class="button-md bkgdBlue text16">Hello</button>
Code (White)
<button type="button" class="button-md bkgdWhite text16">Hello</button>
Notes
Must use title case.
When including an icon, there must be a space between the icon and the text as well as a span wrapping the text.
If centering the button, use displayFlex and flexJustifyCenter classes on the containing element.
Resources
| Sass File(s) | /sass/components/_buttons.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Use a button tag (with type="button") when interacting with something on the same page. Use an a tag when moving user to another page.
Disabled Buttons
Buttons that appear inactive but still give error validation when used.
Example
Code
<button type="button" class="button-lg text16 disabledBtn">Disabled</button>
Notes
Must follow same rules as active buttons.
Uses same sizes as active buttons.
Uses disabledBtn class.
Does not use disabled attribute so we can always provide error feedback if clicked.
Resources
| Sass File(s) | /sass/core/_buttonsresponsive.scss |
|---|---|
| JS File(s) | None Required |
| JS Functions | None |
| Locale Keys | None |
Accessibility
Use a button tag (with type="button") when interacting with something on the same page. Use an a tag when moving user to another page.