Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A custom button for the Flow component.
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",
},
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.