Skip to main content

Button
component

Buttons enable the merchant to initiate actions, like "add", "save", or "next".

Note

The plain ButtonType is no longer supported as of POS 10.0.0 and defaults to basic.

Anchor to buttonButton

Anchor to isDisabled
isDisabled
boolean

Sets whether the Button can be tapped.

Anchor to isLoading
isLoading
boolean

Sets whether the Button is displaying an animated loading state.

Anchor to onPress
onPress
() => void

The callback that is executed when the user taps the button.

Anchor to title
title
string

The text set on the Button.

Note: When using a Button for menu-item targets, the title will be ignored. The text on the menu-item will be the extension's description.

Anchor to type
type

The type of Button to render. Determines the appearance of the button. Note: The 'plain' type is no longer supported as of POS 10.0.0. Using it will default to 'basic'.

Was this section helpful?

Anchor to buttontypeButtonType

Determines the appearance of the button.

'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 />
})

Preview