Designing a Button Theme

We mostly define our buttons' height based on the items within. These items can be text and icons. The button's total height and width will be defined by adding all the values together. This rule has an exception: If the height values(text's line-height + icon's height) doesn't meet the minimum standards for accessibility then the buttons height should be set manually. (e.g. min-height)

Also known as default state.

Every button needs to have a hover state to indicate the user's cursor is on the button and it's interactable.

Or set them both if needed.

Focus states are crucial for more accessible web you should definitely care for focus states both on designing and developing stages.

If a button is interactable it should also have it's disabled state ready.

Not every button but some buttons also need to have; loading, success, warning and info states. Be sure to cover those states if needed.

You can use online tools like WebAIM's Contrast Checker, Color.Review or plugins e.g. Color Contrast Analyser for Sketch and A11y for Figma.

We are a huge fan of labelling things properly, here is a common naming convention we follow for our projects: Buttons / Ghost / Success