Buttons layout usage

You might have encountered our sample app at the start of your development process. In the sample app, we give you our best practice for buttons usage. The following are the buttons that we recommend for you to use in your app.

Here is an example for the sample app header with the HTML/CSS code:

See the Pen Window controls by Overwolf Developers (@OverwolfDevs) on CodePen.

 window-control_close– Closes the app

window-control_maximaize– Maximizes the app to fullscreen

window-control_restore– Restores the app to its original size

window-control_minimizeMinimizes the app

window-control_settings– If your app has any special settings, this would be the place to present them. Other then that, you can use this button to direct user to the Overwolf settings page.

window-control_support– Your support tab.  Our best practice is to use the Widgetbot with this button. Read more here.

 

App that uses our best practices:

More apps: