Alert

A component to show alerts, usually used as a banner at the top of a page.

Success message

<Alert
  type="success"
  text="Success message"
/>

Info message

<Alert
  type="info"
  text="Info message"
/>

Warning message

<Alert
  type="warning"
  text="Warning message"
/>

Error message

<Alert
  type="error"
  text="Error message"
/>

Alert with children content

Text + Children (List)

We found some issues while processing your file. Please fix these errors and try again.

Invalid data format in row 3
Missing required field in row 5

<Alert
  type="error"
  text="We found some issues while processing your file. Please fix these errors and try again."
>
  <ul>
    <li className="list-inside list-disc">
      <Text variant="caption/400">Invalid data format in row 3</Text>
    </li>
    <li className="list-inside list-disc">
      <Text variant="caption/400">Missing required field in row 5</Text>
    </li>
  </ul>
</Alert>

Text + Children (Text)

Your subscription will expire soon

Please renew your subscription before December 31st to avoid service interruption.

<Alert
  type="warning"
  text="Your subscription will expire soon"
>
  <Text variant="caption/400">
    Please renew your subscription before December 31st to avoid service interruption.
  </Text>
</Alert>

Children only

Our system will be undergoing maintenance on Saturday, 10 PM - 2 AM EST. During this time, some features may be unavailable.

<Alert
  type="info"
  text=""
>
    <Text variant="caption/400">
      Our system will be undergoing maintenance on Saturday, 10 PM - 2 AM EST.
      <span className="underline">During this time, some features may be unavailable.</span>
    </Text>
</Alert>