The purpose of buttons is to provide a clear and intuitive way for users to interact with the interface and perform various actions. They enhance the user experience by making key functionalities easily accessible and identifiable, helping users navigate and interact with the application or website more efficiently.
Buttons serve a wide range of purposes in user interfaces, such as submitting forms, confirming actions, navigating to different pages or sections, or executing specific functions.
Anatomy
The anatomy of a button differs depending on the use case. The most common button is the Primary button disected in the image below.
- Background. In this instance the token background-primary-button-default.
- Label. In this instance the placeholder "Click me".
- Icon. In this instance the icon arrow-right.
- Shadow. For buttons it's always the token shadow-ui-outward.