---
title: Button
description: >-
  A versatile button component with multiple variants and sizes for user
  interactions.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/button'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/button.md'
---

# Button

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

## Props

* **children**

  **React.ReactNode**

  Button content

* **disabled**

  **boolean**

  Whether the button is disabled

* **onClick**

  **React.MouseEventHandler\<HTMLButtonElement>**

  Click handler

* **size**

  **'default' | 'sm' | 'lg' | 'icon'**

  Button size

* **stopPropagation**

  **boolean**

  Prevent click from bubbling to parent elements

* **variant**

  **| 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'icon'**

  Visual style variant

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/shop-minis/Button-CIXtNuGa.png)

### Examples

* #### Button

  ##### Default

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

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

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

* #### Primary button

  ##### Description

  A button with the Shop brand color background

  ##### Default

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

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

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

* #### Secondary button

  ##### Description

  A button for less prominent actions

  ##### Default

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

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

* #### Destructive button

  ##### Description

  A button for dangerous actions like delete

  ##### Default

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

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

* #### Disabled button

  ##### Description

  A button in a disabled state

  ##### Default

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

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