A custom button for the Flow component.

FlowButton.tsx

import * as React from "react"
import { Frame, FrameProps, addPropertyControls, ControlType } from "framer"
// @ts-ignore
import { showNext, showPrevious } from "@framer/steveruizok.flow/code"

type Props = Partial<FrameProps> & {
    target: string
    text: string
}

export function CustomButton(props: Props) {
    const { target, text, style, ...rest } = props

    const handleTap = () => {
        showNext(target)
    }

    return (
        <Frame
            {...rest}
            background="#0099ff"
            color="#FFFFFF"
            borderRadius={12}
            shadow={"0px 2px 12px rgba(0,0,0,.2)"}
            style={{ fontSize: 20, fontWeight: 600, ...style }}
            onTap={handleTap}
        >
            {text}
        </Frame>
    )
}

CustomButton.defaultProps = {
    height: 64,
    width: 240,
    target: "Home",
    text: "Get Started!",
}

addPropertyControls(CustomButton, {
    text: {
        type: ControlType.String,
        defaultValue: "Get Started!",
    },
    target: {
        type: ControlType.String,
        defaultValue: "Home",
    },
})