Features - Buttons & Controls
This is the basic syntax for a
<button> element with the base button class
The code for including a basic button:
In order to keep the accessibility you should use these primary button versions (secondary are on white/gray background and are accessible already):
Primary buttons in 7 accessible colors, support hover and focus (try it!). use
.brown / ...
Square Button Shapes:
Round GlyphIcons / Font Awesome Buttons
Note: These buttons carry markup for assistive technologies, for people who can't see the icon and understand the context from it. Don't remove it.
Round GlyphIcons / Font Awesome Buttons Border-Only Style
Metro Style Buttons:
Flat buttons with both font icon and text.
These are the same color classes on Bootstrap's default
To create these buttons add the class
The 'default' Bootstrap primary button is accessible:
To use the 'default' button add the class
.btn-primary without any of those classes will produce the blue type above).
The 'default' Bootstrap Danger button is accessible and was not changed:
The 'default' Bootstrap button-link is accessible and was not changed:
Some of the default Bootstrap classes are not accessible by WCGA 2.0 AA level:
in order to use them their colors have been changed to make them more contrasting:Original:
In Addition, lables have the same problems and thus the same colors will be applied there as well:Default Primary Success Info Warning Danger
Display a disabled button.
Source code for disabled primary buttons
<button class="btn disabled" disabled="disabled" aria-disabled="true">CONTINUE</button>
aria-disabled="true" attribute is added for accessibility to alert the screen reader that the element is disabled. Do not rely solely on styling for disabled buttons: explicitly provide the
Inputs as Buttons
<input> as a button.
Source code for inputs styled as buttons
<input type="button" class="btn btn-primary" value="SUBMIT">
Links As Buttons
Links used as buttons require the
role=“button” to present the link as a button to assistive technologies.
Source code for links styled as buttons
Special Input Fields
Input Fields in Different states
Note: The preceding input examples do not demonstrate the input “masking”‚ they only show the normal state and
readonly state of inputs.
Formatted Fields with the Masked Input Plugin
The Jasny Bootstrap Masked Input Plugin allows a user to easily enter fixed width data in a specified format (dates, phone numbers, etc). For more information, you can reference the Jasny Bootstrap Input Mask documentationThis link opens a new window or tab.
Select inside the input field to see the date masking.
Expected format 999-99-999-9999-9
Expected format M M/D D/Y Y Y Y
The following code formats the values of Date Of Birth date field using a MM/DD/YYYY format.