Accessible Buttons

Buttons are everywhere on the web, coming in all sorts of colors and sizes. The types of buttons are many. Here is a comprehensive list of all those buttons!

Popup Button

A popup button is a button that mounts a component onto the DOM. This basically means that a component appears on the website that wasn't there before.

Toggle Button

A toggle button does as the name describes, it toggles a part of the website to hide or display a component. Unlike a popup button, the toggled component already exists on the website, but it may or may not be visible depending on its toggle state. An example of using a toggle button would be a layered navigation system, where there could be 3 toggle buttons to hide or display different navigation elements.

Dropdown Button

Dropdown buttons are more specific than toggle buttons. The dropdown button is directly associated with the content it is being toggled. Note that it is possible to achieve the same effect for toggle buttons using the aria-describedby and/or aria-labelledby fields.

Form Buttons

Submit Button

Buttons that submit forms

Reset Button

Buttons that reset the content of a form to its default state  (usually empty).

General Button

A button that really doesn't fit the box of any of the above.

Styling Buttons

In any large enough codebase, you are going to experience an overload of buttons. In order to minimize the number of button files, you have the option to adjust the different styling of buttons through a custom style prop. It's good practice to have at least one unique style for each of the above buttons, so the user has some kind of recognition for what each button does. As an alternative, you can opt to make all the above buttons wrapper elements and have them accept any kind of button content as children.