Buttoncomponent
component
Buttons enable the merchant to initiate actions, like "add", "save", or "next".
- stringrequired
The text set on the
Button.The type of
Buttonto render. Determines the appearance of the button.- () => void
The callback that is executed when the user taps the button.
- boolean
Sets whether the
Buttoncan be tapped.- boolean
Sets whether the
Buttonis displaying an animated loading state.
ButtonProps
- title
The text set on the `Button`.
string - type
The type of `Button` to render. Determines the appearance of the button.
ButtonType - onPress
The callback that is executed when the user taps the button.
() => void - isDisabled
Sets whether the `Button` can be tapped.
boolean - isLoading
Sets whether the `Button` is displaying an animated loading state.
boolean
export interface ButtonProps {
/**
* The text set on the `Button`.
*/
title: string;
/**
* The type of `Button` to render. Determines the appearance of the button.
*/
type?: ButtonType;
/**
* The callback that is executed when the user taps the button.
*/
onPress?: () => void;
/**
* Sets whether the `Button` can be tapped.
*/
isDisabled?: boolean;
/**
* Sets whether the `Button` is displaying an animated loading state.
*/
isLoading?: boolean;
}ButtonType
'primary' | 'basic' | 'destructive' | 'plain'Was this section helpful?
Determines the appearance of the button.
'primary' | 'basic' | 'destructive' | 'plain'ButtonType
'primary' | 'basic' | 'destructive' | 'plain'Was this section helpful?
Render a button that presents a toast
import React from 'react'
import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale'
const ModalComponent = () => {
const api = useApi()
return (
<Navigator>
<Screen title="Home" name="Home">
<Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} />
</Screen>
</Navigator>
)
}
export default reactExtension('pos.home.modal.render', () => {
return <ModalComponent />
})
examples
Render a button that presents a toast
React
import React from 'react' import { Button, Navigator, Screen, reactExtension, useApi } from '@shopify/ui-extensions-react/point-of-sale' const ModalComponent = () => { const api = useApi() return ( <Navigator> <Screen title="Home" name="Home"> <Button title="Press me!" onPress={() => api.toast.show('Button tapped!')} /> </Screen> </Navigator> ) } export default reactExtension('pos.home.modal.render', () => { return <ModalComponent /> })TS
import { Button, Navigator, Screen, extension, } from '@shopify/ui-extensions/point-of-sale'; export default extension( 'pos.home.modal.render', (root, api) => { const button = root.createComponent(Button, { title: 'Press me!', onPress: () => { api.toast.show('Button tapped!'); }, }); const screen = root.createComponent(Screen, { name: 'Home', title: 'Home', }); screen.append(button); const navigator = root.createComponent(Navigator); navigator.append(screen); root.append(navigator); }, );
Preview
