Buttons are used to trigger actions. They should clearly communicate what will happen when the user clicks them.
Customize the button properties to see how they affect the component.
Buttons are the primary way users interact with your interface to take action. Clear, consistent, and accessible buttons reduce friction and help users complete tasks confidently. A confusing button hierarchy can lead to errors or hesitation.
High emphasis. Used for the main action on a screen (e.g., "Save", "Submit"). Only one per section.
Medium emphasis. Used for alternative actions (e.g., "Cancel", "Back"). Can appear multiple times.
Low emphasis. Used for less important actions or to reduce visual noise.
Used for actions that delete or remove data. Often styled in red to warn the user.
Use action verbs (e.g., "Save", "Send") instead of generic terms like "OK" or "Yes".
Define clear styles for hover, active (pressed), focus, and disabled states.
Ensure buttons are large enough to be easily tapped on mobile devices (min 44px height).