Button
Components
A button is an interactive element that triggers an action when clicked or tapped. It clearly communicates its clickability through visual styling and provides feedback on user interaction, making it a fundamental component for enabling user actions in interfaces.
Checklist
Reset
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: hover, focused, disabled
