© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

CUSTOM ICON BUTTON

Create a custom button that features an icon by grouping a rectangle widget with an icon from Axure RP's Icons widget library. Use the group's OnClick event to add interactivity to the button.

STEP 1: APPLY CUSTOM STYLES

Select the "Submit" rectangle widget on the canvas. Then, click "Style" in the Inspector pane to open that tab. Notice that the rectangle's currently applied style, "Box 1", is displayed in the "Widget Style" dropdown.


MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 2: GROUP THE WIDGETS

Select both widgets on the canvas. Then, click "Group" in the Main Toolbar to group them together. (Alternatively, you can use the keyboard shortcut [CTRL] + [G] (Windows) / [CMD] + [G] (Mac).) Name the group "Custom Submit Button".

 

STEP 3: ADD INTERACTIVITY

Grouping the two widgets together like this allows them to interact as a single widget. When using a custom icon button in your own prototypes, add all OnClick cases to the OnClick event of the group itself. This will allow those actions to fire whether the rectangle or the icon is clicked in the web browser.


If you set up mouse interaction styles on the group's contained widgets, you can trigger them all together when the cursor interacts with any part of the group. To do this, select the group and check "Trigger Mouse Interaction Styles" in the Properties tab of the Inspector.

SUBMIT

In the training document, open the page named "Custom Icon Button". On the canvas are a "Submit" rectangle widget and an "Envelope" icon widget from Axure RP's Icons widget library.


The training document already has a few custom widget styles set up, so let's apply those to the widgets now.

Next, select the "Envelope" icon widget and apply the "Custom Button Icon" widget style to it.

Note: You can also see this dropdown at the far left of the Style Toolbar.


Click the arrow icon to the right of "Box 1" to open the dropdown, and select "Custom Button" to apply that style to the rectangle widget.