Skip to main content

Alert
component

A component with a title and description, available in different visual variants. You can view the Storybook for more interactive examples.

Was this section helpful?

Alert

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

Preview

Anchor to examplesExamples

Alert variants and configurations

Anchor to example-default-alertDefault alert

A default alert for general notifications

Anchor to example-destructive-alertDestructive alert

A destructive alert for error messages and warnings

Was this section helpful?

Default alert

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