Button Component
Contributed by Ke Louis Liu
This is the index page for the Advanced folder!
Basic Component
Code Usage
Definition and Usage
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element!
Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
Variants
Trigger Button
Code Usage
Loading Button
Code Usage
Hover Button
Code Usage
Focus Button
Code Usage
Active Button
Code Usage
Icon Button
Code Usage
Usability
Use icons only when necessary
Icons can be used in buttons when additional clarity is required and the icon is highly relevant to the action. Icons should not be used for decoration.
Don't override color
Do not use custom colors for buttons. The colors of different button variations have been designed to be consistent and accessible.
When to use static black and static white
To ensure maximum contrast with the background, use static black for light backgrounds and images, and use static white for dark backgrounds and images. Avoid placing static components on top of busy images with a lot of variance in contrast.
Don't use the pending state for long progress
The pending state should be reserved for indeterminate actions that are expected to take 5 seconds or less. For determinate or longer actions, use a progress bar or progress circle outside of the button.
Use a button group to show additional actions
Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action.
Display a popover when featuring subsequent options
In some instances, it's possible to have a call to action button display a popover (or tray) to feature subsequent options. These options should extend and parallel the action of the button. Do not include arbitrary or unrelated options.
Accessibility
The native <button> element is already optimized for screen readers and other assistive technologies, making it more user-friendly for individuals with disabilities.
Focus Management
Buttons can receive keyboard focus, meaning users can navigate to the button using the Tab key and activate it using the Enter or Space key.
Attributes
| Attribute | Value | Description |
|---|---|---|
autofocus | autofocus | Specifies that a button should automatically get focus when the page loads |
disabled | disabled | Specifies that a button should be disabled |
form | form_id | Specifies which form the button belongs to |
formaction | URL | Specifies where to send the form-data when a form is submitted. Only for type="submit" |
formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Specifies how form-data should be encoded before sending it to a server. Only for type="submit" |
formmethod | get post | Specifies how to send the form-data (which HTTP method to use). Only for type="submit" |
formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission. Only for type="submit" |
formtarget | _blank _self _parent _top framename | Specifies where to display the response after submitting the form. Only for type="submit" |
name | name | Specifies a name for the button |
type | button reset submit | Specifies the type of button |
value | text | Specifies an initial value for the button |
Version
| Version | Editor | Author | Date | Description |
|---|---|---|---|---|
| v1.0 | Ke Liu | Ke Liu | Oct 5 2023 | Initial version |