A Button-Shaped Form of Madness

A web application wouldn’t be much good without some form of button to click on. Buttons allow you to perform actions, select choices, or in some cases, do unspeakable things—every villain throughout history had a big red one.

Whatever your reason for having buttons, BS4 has more than enough variety to keep even the most manic clickers happy, and as with all the other components available, it provides contextual colors and dark and light variations too.

Button basics

The simplest thing to do to create a button is to apply the btn class to a block-level element.

You can apply the class to anchor tags and inline elements too, but for best results, buttons should always be used with the HTML5 semantic <button> tag.

Note: Buttons or anchors? Many folks using HTML5 use standard <a> (anchor) elements to provide buttons and activate functionality in a web application. While this works, it can cause you many problems’ I've seen links to delete functions placed as “get” links, and then watched in horror as Google sends its spider over a website and quickly empties the site’s database. Anchors have a distinct use case over buttons, and should only ever be used for a button that either navigates to a new page or provides functionality that makes no changes. The W3C and other standards bodies all recommend that for anything other than navigation, <button> tags should be used where possible. Which you use is up to you; BS4 will style both exactly the same.

The simplest button you can produce is as follows.

Code Listing 51: The most basic button you can produce

When rendered, you should see a simple gray button with whatever caption you provided.

Figure 50: The simplest button possible

Adding the btn class is not all, though. To apply contextual colors, you add a modifier class, as Code Listing 52 demonstrates.

Code Listing 52: Simple buttons with modifier classes added

Code Listing 52 shows the different contextual colors you can add to your buttons. In Chrome, you should see one of each type, as follows.

Figure 51: Simple buttons with contextual colors

In Figure 51, you can see that the last button is marked as a Link button. The idea here is to allow you to use regular semantic button tags, but to make them look like standard anchor links. The intended use is to place them in table rows as controls to activate record actions, or as help links in dialog boxes and alerts. Remember though: colors are just colors. Because this is set using an extra class, screen readers will NOT pick up on the fact that a button is dangerous or may lead to an unwanted action. With buttons, you must add ARIA roles (role="button") and things like alternative text, so that a screen reader can help its user. You should also add a proper tab order to buttons and allow them to be focusable; this will allow the use of the Tab key or arrow keys on a keyboard to move around an application correctly.

In fact, the one big plus about using the <button> tag for this kind of interactivity is that you don’t have to code it yourself. There’s nothing stopping you from using a btn class on a <div> tag. After all, both elements are block-level elements, and they will look exactly the same when rendered in the document, but fundamentally, unless you add a lot of extra JavaScript code and make sure that you’re religious about setting tab order correctly, you simply won’t be able to focus and navigate the controls the way you will when using buttons.

If you don’t want filled buttons, then you can use the btn-outline-xxxx modifier classes instead of the standard contextual colors you used in Code Listing 52. The xxxx should be replaced with the contextual name you want to use, as Code Listing 53 shows.

Code Listing 53: Outline contextual button styles

In the browser, your buttons should change to look like Figure 52.

Figure 52: Simple buttons changed to use the outline contextual colors

There are three modifier classes to adjust the button size: btn-lg, btn-sm, and btn-block. lg and sm will alter the size but will maintain the button width so that it is sized to the text. Using block, on the other hand, will make the button expand to fill the width of its parent container. If you’re controlling the layout of your buttons using the flexible grids shown at the beginning of this book, then btn-block is a really good modifier to use as it will ensure that your buttons adapt to whatever responsive width your various containers adapt to when responding to screen size changes.

Code Listing 54: Different button sizes

If you put the code from Code Listing 54 in as the body code in your template and load it into the browser, it should produce the following output.

Figure 53: Different button sizes produced by Code Listing 54

While you’re playing around with buttons, you should notice they have different visual styles depending on what state the button is in. When you tap one, for example, it becomes a little darker and has an inner shadow.

Usually this is all handled by BS4 internally, but there may be times when you need to make your buttons appear to be tapped from application code. You can do this by adding the active class to the class list for your button. Don’t forget that if you do add the class, it’s good practice to add the ARIA role aria-pressed="true" attribute so screen readers know it’s marked as being pressed.

You can also make a button appear to be disabled by adding the disabled attribute. When you use this on a standard button tag, not only does it give you the BS4 disabled button style, but it also physically disables the button too, which means that no events fire on it.

Unfortunately, the disabled attribute doesn’t work on <a> tags, so if you’re using an anchor with button styles to activate things, then adding the disabled attribute won’t have any effect. Instead, what you need to do is add the disabled class to the <a> tag, and then you need to take steps in your program code to prevent the click on the anchor from being acted upon. How you do this depends entirely on the framework and code you’re using in your application, but often just involves returning false from your event handler.

Code Listing 55: Showing the button disabled styles

Code Listing 55 shows an example of marking a button as disabled. I've added a simple onclick to the <a> tag to make it return false, so that its click is effectively disabled. Clicking on the first <a> tag should give you a 404 error (unless you actually have a file on your system called igosomewhere). If you change the href attribute in the two links to another page, you’ll see that they behave the same as the buttons with respect to being disabled. The method I show works in plain JavaScript, but please read the notes earlier in this chapter regarding using buttons or <a> tags before you decide how you wish to use these in a framework.

Figure 54: Disabled button styles

Button groups

In many site or page designs, you may want a collection of buttons, for example, in a toolbar or on a menu of some description. BS4 has appropriate styles and classes that not only allow you to maintain consistency when doing this, but also allow you to set up a control that behaves in much the same way that a set of radio buttons does (where only one can be selected).

Button groups are great for many aspects of an application UI because you can make components from them that are then reusable. With a framework such as Aurelia or Angular, you can put together entire button palettes, and then reuse them as a single control.

You can also group buttons with input controls, for example, by adding a search button to a search field. We’ll see more about this in the chapter on forms.

Basic groups are created by wrapping a collection of <button> tags inside a <div> tag, and then applying the class btn-group to the <div>. As always, you should also put the correct ARIA attributes on the outer tag so that assistive technologies handle it correctly.

Code Listing 56: A basic button group

Code Listing 56 shows a basic horizontal group containing six buttons. Each button is independent of the other, but formatted to look like one unit, as can be seen in Figure 55.

Figure 55: A basic BS4 button group

Buttons can also be grouped into a toolbar by wrapping multiple button group <div> tags inside an outer <div> tag that has a btn-toolbar class applied to it. This allows you to make chains of button groups while still keeping them as one functional unit. If you use some of the spacing utilities, you can also keep good, balanced spacing between the groups.

Code Listing 57 demonstrates how to do this.

Code Listing 57: A demonstration of a BS4 button toolbar

Again, ARIA roles are very important because a screen reader will simply announce these all as single, independent buttons, potentially confusing a screen reader, or at worst, turning assisted users away because there’s “too much stuff going on.”

Figure 56: Button toolbar produced by Code Listing 57

Buttons can also have drop-down menus attached to them (you’ll see more of this in an upcoming chapter); however, if you want to add buttons with drop-down menus into a button group, you must nest two button groups containing them.

Code Listing 58: Nested button groups to include buttons with drop-down menus

You need to wrap every drop-down menu you wish to use inside its own nested <button> group, while all your regular button group members stay in the outermost <button> group tag.

The nesting can get a bit deep and tangled, so I would advise you to use drop-down menus with caution. If you’re thinking about using them for a navigation system, BS4 has a better component for that purpose.

Figure 57: A button group with a nested drop-down as produced by Code Listing 58

All the usual sizing and color subclasses work the same way inside a button group, just as they do with regular buttons, so you can show disabled buttons or color buttons and set them to different sizes.

You can also change your btn-group class to btn-group-vertical so that your buttons are stacked from top to bottom, rather than running inline from left to right.

If you also add btn-group-toggle to your outer <div>, then mark up your buttons using check boxes, your button groups will work in the same visual manner that a line of check boxes does. Marking up the inner controls using radio controls gives you a button group where only one option can be selected at a time.

Code Listing 59: Check box, radio, and vertical button groups example

Code Listing 59 shows how to put together a check box, radio, and vertical button group. Note that we can mark any that are preselected in the group by adding the active class. In the case of the check boxes and radios, this is added on the same element that has the checked attribute, so that when submitting a form they may be contained in, you submit the correct values. BS4 will not handle the checked attribute for you—the only things it will change are the styles on the button. If you wish to change the checked attribute on the underlying controls, then you’ll need to add the required code to do this yourself, using either your framework or some standard JavaScript.

Code Listing 59 should produce a page the looks something along the lines of Figure 58.

Figure 58: Check box, radio, and vertical group as produced by Code Listing 59

We’re going to leave the subject of buttons here and move on to some other features. There’s still a lot more that buttons can do—they have a lot of JavaScript functionality and they can be attached to data attributes to automatically open dialog boxes, menus, and many other things.

Going beyond this point means reading the official documentation.