Components
The standard UI components to interact with the pages.
Buttons
The standard buttons to launch actions.
Primary button
A standard button for the main action on the page.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
<button class="button primary ">Apply</button>Secondary button
A standard button for the secondary action on the page.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
<button class="button secondary ">Cancel</button>Inputs
The standard form inputs to enter data.
Text box
A standard text box.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
<input type="text" placeholder="Enter a text" class="box text "/>Search box
A standard search box.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
<input type="search" placeholder="Search something" class="box search "/>Select
A standard select.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
<select class="box select ">
<option value="" disabled selected>Select an option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>Checkbox
A standard checkbox.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
:checked
Indicates when checked
:checked:focus
Highlights when checked and focused
:checked:disabled
Grays out when checked and disabled
<input type="checkbox" class="choice check "/>Radio button
A standard radio button.
Example
Default styling
:focus
Highlights when focused
:disabled
Grays out when disabled
:checked
Indicates when checked
:checked:focus
Highlights when checked and focused
:checked:disabled
Grays out when checked and disabled
<input type="radio" class="choice radio "/>