Displays a callout for user attention.
1import { Alert } from "@ngrok/mantle/alert";2import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";3 4<Alert.Root priority="danger">5 <Alert.Icon />6 <Alert.Content>7 <Alert.Title>Danger</Alert.Title>8 <Alert.Description>This is a danger Alert.</Alert.Description>9 </Alert.Content>10</Alert.Root>11<Alert.Root priority="info">12 <Alert.Icon />13 <Alert.Content>14 <Alert.Title>Info</Alert.Title>15 <Alert.DismissIconButton />16 <Alert.Description>This is an info Alert.</Alert.Description>17 </Alert.Content>18</Alert.Root>19<Alert.Root priority="important">20 <Alert.Icon />21 <Alert.Content>22 <Alert.Title>Important</Alert.Title>23 <Alert.Description>This is an important Alert.</Alert.Description>24 </Alert.Content>25</Alert.Root>26<Alert.Root priority="success">27 <Alert.Icon />28 <Alert.Content>29 <Alert.Title>Success</Alert.Title>30 <Alert.Description>This is a success Alert.</Alert.Description>31 </Alert.Content>32</Alert.Root>33<Alert.Root priority="warning">34 <Alert.Icon />35 <Alert.Content>36 <Alert.Title>Warning</Alert.Title>37 <Alert.Description>This is a warning Alert.</Alert.Description>38 </Alert.Content>39</Alert.Root>40<Alert.Root priority="danger">41 <Alert.Icon svg={<ShrimpIcon />} />42 <Alert.Content>43 <Alert.Title>Danger w/ custom icon</Alert.Title>44 <Alert.Description>This is a danger Alert.</Alert.Description>45 </Alert.Content>46</Alert.Root>You can mix and match what you put inside the Alert component to create different types of Alert layouts.
1import { Alert } from "@ngrok/mantle/alert";2 3// Danger Alert with icon and Dismiss Icon Button4<Alert.Root priority="danger">5 <Alert.Icon />6 <Alert.Content>7 <Alert.Title>Danger Will Robinson</Alert.Title>8 <Alert.DismissIconButton />9 <Alert.Description>This is a danger alert.</Alert.Description>10 </Alert.Content>11</Alert.Root>12 13// Danger Alert without icon14<Alert.Root priority="danger">15 <Alert.Content>16 <Alert.Title>Danger Will Robinson</Alert.Title>17 <Alert.Description>This is a danger alert.</Alert.Description>18 </Alert.Content>19</Alert.Root>20 21// Danger Alert with icon and no description22<Alert.Root priority="danger">23 <Alert.Icon />24 <Alert.Content>25 <Alert.Title>Danger Will Robinson</Alert.Title>26 </Alert.Content>27</Alert.Root>28 29// Danger Alert without icon or description, but including a Dismiss Icon Button30<Alert.Root priority="danger">31 <Alert.Content>32 <Alert.Title>Danger Will Robinson</Alert.Title>33 <Alert.DismissIconButton />34 </Alert.Content>35</Alert.Root>For banner-like alerts, use the appearance="banner" prop. This automatically removes the top, left, and right border, leaving only the bottom border.
Laboris commodo Lorem anim consequat ut dolore proident.
1import { Alert } from "@ngrok/mantle/alert";2 3<Alert.Root priority="info" appearance="banner">4 <Alert.Icon />5 <Alert.Content>6 <Alert.Title>This is an info Alert as a page banner</Alert.Title>7 </Alert.Content>8</Alert.Root>;Use the icon prop on Alert.DismissIconButton to render a custom icon in place of the default X.
1import { Alert } from "@ngrok/mantle/alert";2import { ShrimpIcon } from "@phosphor-icons/react/Shrimp";3 4<Alert.Root priority="warning">5 <Alert.Icon />6 <Alert.Content>7 <Alert.Title>Custom Dismiss Icon</Alert.Title>8 <Alert.DismissIconButton icon={<ShrimpIcon />} />9 <Alert.Description>This dismiss button uses a custom icon.</Alert.Description>10 </Alert.Content>11</Alert.Root>;Displays a callout for user attention. Root container for all Alert sub-components.
All props from div, plus:
The container for the content slot of an Alert. Place Alert.Title, Alert.Description, and Alert.DismissIconButton as direct children.
All props from div.
The optional description of an Alert. Renders as a div by default, but can be changed to any other element using the asChild prop.
All props from div, plus:
An optional icon that visually represents the priority of the Alert. The default rendered icon can be overridden with a custom icon using the svg prop.
All props from svg, plus:
The title of an Alert. Renders as an h5 element by default; use asChild to render something else.
All props from h5, plus:
A dismiss icon button that closes the alert when clicked.
All props from IconButton, with the following overridden defaults: