How to Build a Custom On/Off Toggle Switch in Axure

Creating the “Off” State

Drag a rectangle of size 44 × 22 onto the canvas. Set its fill colour to #CCCCCC, corner radius to 23 px, border width to 0, and add the text “关”. Align the text to the right, set margins to 2 px top, 2 px right, 6 px bottom, 2 px left, and set the text colour to #FFFFFF.

Drag an ellipse of size 18 × 18 and set its border width to 0.

Select both shapes, right‑click → Convert to Dynamic Panel . Rename the default state to “关” (Off).

Creating the “On” State

Duplicate the dynamic panel created above and rename the new state to “开” (On).

In the “开” state change the text from “关” to “开”, align the text to the left, set the fill colour to #2D8BEF, and adjust margins to 6 px top, 2 px right, 2 px bottom, 2 px left.

Add a Click interaction to the dynamic panel that toggles between the “关” and “开” states, turning the widget into a functional toggle button.