Anatomy of a Button

Because of line-height, you might have to add some extra padding on left and right of your auto layout. Fill is usually primary color and text is a color with good contrast

Make sure you are using your defined type-styles, defined color styles and an icon pack that is npm-compatible + available on Figma.

Using Variants for States

Every button has a label-text and a placeholder for icons. But just these two atoms can be re-arranged in different ways. This is where your variants come in.

Labels & Icons - There are three combinations of icon + label.

We can lower opacity of text in button on clicked state.

Secondary Buttons - They are usually in whites/ greys. Hover has a fill.

We can use 25% opacity fill on Hover state of Button, increase opacity on pressed state and can have some outer glow on focused state.

Tertiary Buttons - They Need minimum attention

We can always add an underline in tertiary buttons with no icon added so that it feels like it is clickable.