Native back button

Content Type: Widget
Categories: Mobile


I’ll be back! :-) Use this button to create your own header with a back button that resembles the platform default button.


Demo url


Mendix native back button


  • Shows button with icon similar to the real native back button
  • Responds to device dark mode setting by default
  • Allows fixing dark or light mode regardless of device dark mode
  • Useful when the default header with navigation does not work for you.
  • Normal Mendix action property
  • No real native back functionality; it is just a button.


Because the widget has separate styling for dark/light and android/ios, several style classes are involved. The example below shows the color and font settings. Note that empty styles could be left out, these are here as example only.

Copy the snippet to your native style and adjust to your needs.

export const customBackButtonStyle = {
    iosContainer: {
    androidContainer: {
    androidDarkImage: {
        tintColor: "#f3f3f3",
    androidLightImage: {
        tintColor: "#0d0d0d",
    iosDarkImage: {
        tintColor: "#f3f3f3",
    iosLightImage: {
        tintColor: "#0d0d0d",
    darkCaption: {
        color: "#f3f3f3",
        fontSize: 17
    lightCaption: {
        color: "#0d0d0d",
        fontSize: 17


Version: 3.0.0
Framework Version: 9.12.0
Release Notes: Mendix 9.12
Version: 2.3.0
Framework Version: 9.6.5
Release Notes: Dark mode icon
Version: 2.2.0
Framework Version: 9.6.0
Release Notes: Mendix 9.6, new icons, tested with Atlas 3
Version: 2.1.0
Framework Version: 9.4.0
Release Notes: Mendix 9.4 and Atlas 3. Updated dark mode detection in the widget to match Atlas 3.
Version: 2.0.0
Framework Version: 9.0.2
Release Notes: Mx9 release