# Buttons

> Learn how to design and implement buttons effectively with best practices and multi-state options, ensuring user interaction through PandaSuite.

https://docs.pandasuite.com/essentials/interactions/buttons/

**The button is one of the fundamentals of your user interface. It allows the user to know that an action is possible and to execute this action. It is an essential intermediary between your user and your application.**

[Video: Creating buttons with PandaSuite: appearance, states and actions](https://www.youtube.com/embed/RbOoBpyMs9k?&hl=en&cc_lang_pref=en&cc_load_policy=1)

### Design

When the user clicks on a button, that button performs the action associated with it. It is important to specify to the user the purpose of this button using a label, an image (icon) or both.

To create a button, you can insert an image or create your button from PandaSuite Studio using a vector shape, a text and possibly an icon.

The design of a button meets many conventions and depends on its use (mobile, iOS, Android etc.). To find the right design, don't hesitate to take inspiration from UI kits or go to [Dribbble](https://dribbble.com/tags/button_ui).

> **Info**
>
> Here is a very interesting article that presents the best practices of this UI
> element: [7 Basic Rules for Button
> Design](https://uxplanet.org/7-basic-rules-for-button-design-63dcdf5676b4) (UX
> Planet)

### Button States

The button has a default state. You can change the state of this button based on a user action. This is a good way to inform the user that something is happening as a result of his actions.

You can create several states for the same button by varying the design: Normal, In progress, Disabled etc..

[Image: Six states of an Edit button: normal, focus, hover, active, in progress with “Saving…”, and grayed-out disabled]

To create multiple states of a button, insert the [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component and create your default button inside. Then add as many states as you want by varying the design according to the symbolism.

### Add an action

The user commonly taps or clicks on the button to trigger the action.

Select the button and choose the **Single tap/click** trigger and the action: **Change screen**, **Open pop-up**, **Open URL**... If you have used the Multi-state component, add another action to change the state of the button.

[Image: Try again button of a game result screen: Single tap/click, then Change screen › Select screen, towards 12. Plant game, framed]