---
title: Alert
description: >-
  A component with a title and description, available in different visual
  variants.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/primitives/alert'
  md: 'https://shopify.dev/docs/api/shop-minis/components/primitives/alert.md'
---

# Alert

A component with a title and description, available in different visual variants.

#### Props

* **children**

  **React.ReactNode**

  Content to render inside

* **variant**

  **'default' | 'destructive'**

  Visual style variant

Examples

## Preview

![alert](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/Alert-B8MIwEDy.png)

### Examples

* ####

  ##### tsx

  ```tsx
  import {Alert, AlertTitle, AlertDescription} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Alert variant="default">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          You can add components to your app using our SDK.
        </AlertDescription>
      </Alert>
    )
  }
  ```

* ####

  ##### Description

  A default alert for general notifications

  ##### tsx

  ```tsx
  import {Alert, AlertTitle, AlertDescription} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Alert variant="default">
        <AlertTitle>Heads up!</AlertTitle>
        <AlertDescription>
          You can add components to your app using our SDK.
        </AlertDescription>
      </Alert>
    )
  }
  ```

* ####

  ##### Description

  A destructive alert for error messages and warnings

  ##### tsx

  ```tsx
  import {Alert, AlertTitle, AlertDescription} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    return (
      <Alert variant="destructive">
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Your session has expired. Please log in again.
        </AlertDescription>
      </Alert>
    )
  }
  ```

***