# Button ## Motion Functions


Guidance Function	/files/zGEyN5Y8VbczsHe8bWG1
Aesthetic Function	/files/Vf6ES6yWeOpBr6RP7Vtl
Emotive Function	/files/b3o7ZgKGBBmM5RZ2E9OB
Feedback Function	/files/4Vi86ikzUUWfLWWbMKKU

The primary function of a button is Guidance. Buttons are used to navigate through the interface. They indicate where to interact with an interface and guide the user through a particular set of actions.
Buttons can also have a set of secondary functions. They can be used to convey emotions based on the motion design used. In certain instances, they can be playful, aesthetic expressions that convey the brand language. Buttons can also have a feedback component integrated into them as the user waits on an action to be performed. ## Examples

Button // Next - Previous Action by Cosimo Scarpa

In the above example, the button has a left and right arrow to guide the user as to when the action will lead them towards. The button also leverages the principle of dimensionality to provide a narrative element to the interaction and visual design. The button slightly skewed to the direction in which it is clicked provides feedback to the user about where the click has been registered and the direction of the action.

In this example, the button uses principles of Transformation to communicate the actions taken and provide feedback to the user. The button expands to fit the text dynamically as it changes and the arrow squashes and stretches with the clouds behind it moving faster to show a parallax effect. This simulates the idea of the arrow moving through space by manipulating the shapes and position of a few parameters.

In this example, the star button provides guidance and feedback to the user while using a playful star motif for its aesthetic. The button has a greyed-out star that transforms into a fully colored star while hovering. When clicked, the word "Starred" moves in first, and then the value update is offset to have a more apparent impact on the action. The fast movement of the star in the button conveys a presence of energy and impact within the button. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://abhishekshankar.gitbook.io/uxm/the-system/action-components/button.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.