Alert

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

Anchor to propsProps

Anchor to children children React.ReactNode: Content to render inside
Anchor to variant variant 'default' | 'destructive': Visual style variant

Examples

tsx

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

export default function MyComponent() {

return (

<AlertTitle>Heads up!</AlertTitle>

You can add components to your app using our SDK.

</AlertDescription>

</Alert>

)

}

Preview

Examples

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

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

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

Was this page helpful?