Button

A versatile button component with multiple variants and sizes for user interactions.

Anchor to propsProps

Anchor to children children React.ReactNode: Button content
Anchor to disabled disabled boolean: Whether the button is disabled
Anchor to onClick onClick React.MouseEventHandler<HTMLButtonElement>: Click handler
Anchor to size size 'default' | 'sm' | 'lg' | 'icon': Button size
Anchor to stopPropagation stopPropagation boolean: Prevent click from bubbling to parent elements
Anchor to variant variant | 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'icon': Visual style variant

Examples

tsx

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

export default function MyComponent() {

const handleClick = () => {

console.log('Button pressed')

}

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

}

Preview

Examples

tsx

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

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

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

Description

A button with the Shop brand color background

tsx

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

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

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

Description

A button for less prominent actions

tsx

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

export default function MyComponent() {
  return <Button variant="secondary">Cancel</Button>
}

Description

A button for dangerous actions like delete

tsx

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

export default function MyComponent() {
  return <Button variant="destructive">Delete</Button>
}

Description

A button in a disabled state

tsx

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

export default function MyComponent() {
  return <Button disabled>Continue</Button>
}

Was this page helpful?