Skip to main content

Page Action | Link

Use page.link() to link to other Compose apps or external URLs. Often used to build multipage apps.

All that's necessary is to pass a route argument to your App constructor, then use page.link() to navigate between pages.

import { Compose } from "@composehq/sdk"

const homePage = new Compose.App({
    name: "Home",
    route: "home-page",
    handler: async ({ page, ui }) => {
        page.add(() => ui.header("Home"))
        page.add(() => ui.button(
            "settings-btn", 
            { 
                label: "Settings", 
                onClick: () => page.link("settings-page") 
            }
        ))
    }
})

const settingsPage = new Compose.App({
    name: "Settings",
    route: "settings-page",
    handler: async ({ page, ui }) => {
        page.add(() => ui.header("Settings"))
        page.add(() => ui.button(
            "return-btn", 
            { 
                label: "Return to home", 
                onClick: () => page.link("home-page") 
            }
        ))
    }
})

The route argument is used to identify your app, and must be unique for every app in your project.

It's also possible to pass params to the linked app. Learn more in the guide on multipage apps.

To link to an external URL, simply pass a complete URL to the link() function.

import { Compose } from "@composehq/sdk"

const homePage = new Compose.App({
    name: "Home",
    handler: async ({ page, ui }) => {
        page.add(() => ui.header("Home"))
        page.add(() => ui.button(
            "docs-btn", 
            { 
                label: "Go to Compose docs", 
                onClick: () => page.link("https://docs.composehq.com", { newTab: true }) 
            }
        ))
    }
})

API reference​

Function signature​

page.link(
    url: appRouteString || externalUrlString,
    properties: Partial<{
        newTab: boolean,
        params: Record<string, string | number | boolean>
    }>
): void

Parameters​

url

required string
The URL to link to. Either an app route (e.g. "home-page") or an external URL (e.g. "https://docs.composehq.com").

properties.newTab

optional boolean
Whether to open the link in a new tab. Defaults to false.

properties.params

optional Record<string, string | number | boolean>
Optional parameters object to pass to the linked Compose app, which will be made available to that app via the page.params object.

Returns​

void