Design System

https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112 https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

In order to come up with good naming conventions and organization for CSS classnames it is worth to invest a little bit time into some designing tool. Before you even start to code.

Create single set of buttons with all shapes. Most likely you will have 2 basic shapes: an rectangle and rounded. Make them of "middle" size of your choice. Like 26px. In reality, most likely you will use rem's to define button size, but in design software use px. You can make the same set also as simple line/ghost/outline buttons. Make a set with and without icons. Probably good idea is to use some square shape icon as it will allow to better "feel" it in rounded shape button. Rounded shape is required as probably you will have rounded buttons just with icon in it.

Don't pay attention to the colors like Success, Alert.. or any other. For now work only with basic/primary color buttons.

Place text in buttons with and without icon.

Make a button with icon at the right side. Like Options button.

Make text only button. Literally only text. No border, no nothing. But can have an icons in booth sides.

Once you have all possible kinds of buttons, you can start to work on spacing them.

How to Design Flexible Button Components in Figma | UX / UI Design

Building a Design System with Figma at littleBits

Creating atomic components in Figma

Hover and Focus should have the same color, but with constrain that Focus has additional indicator like a focus ring.