Base style
Your default style, one of the following: fill, outline, underline
Shape
Visual properties of a button: padding, border, border radius, shadow
Variants
Each visual type to represent button structure e.g. primary and secondary buttons
Copy
Instructional text that details what will happen if you click the button
⭐️ Users should understand what will happen before clicking a button
⭐️ Buttons can have generic copy such as 'Okay' or 'Cancel', but only if there is context around that action, in the title or as a label for example.
States
How the button changes based on the interaction, examples below
Default
Button visible with no interaction
Hover
Mouse pointer is on button's container
Active
Button has been clicked on by user
Focused
Button visible with no interaction
Disabled
Button visible with no interaction
Visited
Button visible with no interaction
