Button rollover, selected and mouse down styles

The button does not allow custom formatting like rollover and mousedown styles.  The button cannot be set to selected. It is meant to use the native formatting of the browser and operating system. To make a custom formatted button, use the button shape widget.

Minimal formatting options

Fill color and border color and most other style formatting options are disabled on the button widget.. Instead, the browser and OS determine how the button looks in the prototype. This includes the height of the button.

If you want a custom look for your button, use the button shape widget.

Editing Buttons

The button widget is the classic HTML form button which is styled according to the browser and operating system used to view the prototype.

Common Button Interactions

Link to another page or as back button

Set variable values from form entries

Dynamically read or write button text

Create classic forms with the classic button or try the button shape widget for more control of the look and feel.

The button is frequently used as the "Submit" button in a form. Clicking the button sometimes saves the data and links to another page.

A button can be set to be disabled by right-clicking and selecting Edit Button > Set Disabled. It can also be dynamically disabled and enabled using the action "Enable Widget(s)" and "Disable Widget(s)".

A button frequently disabled if something needs to happen in a form before it can be submitted.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2013 Axure Software Solutions, Inc. All rights reserved.

Mockup Software

Wireframe Software

Flowchart Software

Prototyping Software

SRS Documents

Web Design Software

iPhone Mockup Tool

iPad Mockup App

Visio Alternative

Powerpoint Alternative

Use Axure RP as:

WYSIWYG Editor

The Round Up

The button is often used to link to another page or as a "back" button. The fastest way to do this is by using the "Quick Link" in the interactions tab of the Widget Properties pane.

With the button selected, click "Quick Link" and then select the page you want to link to, or Back to previous page.  Click OK to close the dialog. 

The button's formatting is determined by the browser and OS used to view it in the prototype. It usually has mouse over and mouse down styles built into the browser and is likely to closely resemble buttons seen in desktop applications on that operating system.

The text in a button cannot currently be set dynamically or read from. If you want to create a button with dynamic text use the button shape widget.

If you are using a button to submit a form and want to use the entered data later in the prototype, you can store the values into variables. To do that, use the "Set Widget/Variable value(s)" action.

In the image above, the NameVar variable is being set to the text in the NameField. You could then use the OnPageLoad event on the next page to show the name entered in a text panel.

Go old school with the

Button Widget

Example Uses

Submitting a form

For a native browser and OS experience

Set button to disabled

Limitations & Workarounds

Pass Text to Next Page Tutorial

Page Links Tutorial

Back to Widgets

More Button Interactions

Because of their similar qualities and purpose, see the button shape article for more common button interactions.