Skip to main content

Button
component

A versatile button component with multiple variants and sizes for user interactions. You can view the Storybook for more interactive examples.

Was this section helpful?

Button

import {Button} from '@shopify/shop-minis-react'

export default function MyComponent() {
const handleClick = () => {
console.log('Button pressed')
}

return <Button onClick={handleClick}>Continue</Button>
}

Preview

Anchor to examplesExamples

Button variants and configurations

Anchor to example-primary-buttonPrimary button

A button with the Shop brand color background

Anchor to example-secondary-buttonSecondary button

A button for less prominent actions

Anchor to example-destructive-buttonDestructive button

A button for dangerous actions like delete

Anchor to example-disabled-buttonDisabled button

A button in a disabled state

Was this section helpful?

Primary button

import {Button} from '@shopify/shop-minis-react'

export default function MyComponent() {
const handleClick = () => {
console.log('Button pressed')
}

return <Button onClick={handleClick}>Continue</Button>
}