Back to Notes

Buttons

Published:

In this article, I introduce strict constraints and guide on how to use button elements. The definition of button might not meet all standards, but this is how we think.

Compressed Definition (Button):

A small element that emits an event when clicked is called button.

If it looks like a button, but opens a new page then it is not a button but a link. However, if it does something before a redirect, then it is a button.

Using <button> tag

The basic rule of what goes inside is to see the permitted content. Generally, only image or text tags should be used, and the following example implementation structures are to be strictly followed.

The other properties to be used are type and disabled. If onclick is not used then .addEventListener is needed.

Icon only

<button name="accessible-name">
    <svg>
        <title>accessible text</title>
        ...
    </svg>
</button>

or

<button name="accessible-name">
    <img src="" alt="accessible text"/>
</button>

Text only

Always add a text tag and do not use bare because requirements change and styles may have issues. For example when you later want to add elements to text, then it can be put inside the span and not get messed up with flexbox.

<button>
    <span>text</span>
</button>

With icon and text

Has the similar structure as with only icon and only text combined.

<button>
    <img src="" alt="accessible text">
    <span>text</span>
</button>

Styling Buttons

This is the general stylesheet that applies to every button. If it doesn't apply, then it should be reconsidered whether the element is button. Specialized styles could be added to individual buttons.

button {
    /* (optional) Override default styles. */
    border: none;
    padding: 0;

    /* The custom styles. */
    display: flex;
    align-items: center;
    justify-content: center;

    /* (optional) Mobile devices could have different icon orders. */
    flex-direction: column-reverse;
}

/* Style the contents. */
button > * {
    padding: 0.25rem 0.5rem;
}

/* Other useful styles for usability. */
button[disabled] {}

button:hover {}

References