Alert

Hairline frame with an ink icon. Solid ink variant for critical.

Heads up

Your workspace syncs every hour.

Install

npx raster add alert

Markup

<div class="rs-alert" role="status"><div><span class="rs-alert-title">Heads up</span><p class="rs-alert-body">Your workspace syncs every hour.</p></div></div>

React

import { Alert } from "@/components/raster/alert";

<Alert title="Heads up">Your workspace syncs every hour.</Alert>
<Alert variant="solid" title="Payment failed">Update your card to keep publishing.</Alert>

Classes

.rs-alert.rs-alert-title.rs-alert-body.rs-alert-solid