This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

The NavigatorButton component can be used to navigate to a screen and should be used in combination with the NavigatorProvider, the NavigatorScreen and the NavigatorBackButton components (or the useNavigator hook).


Refer to the NavigatorProvider component for a usage example.


The component accepts the following props:

attributeName: string

The HTML attribute used to identify the NavigatorButton, which is used by Navigator to restore focus.

  • Required: No
  • Default: id

onClick: React.MouseEventHandler< HTMLElement >

The callback called in response to a click event.

  • Required: No

path: string

The path of the screen to navigate to. The value of this prop needs to be a valid value for an HTML attribute.

  • Required: Yes

Inherited props

NavigatorButton also inherits all of the Button props, except for href and target.