<!-- @dsCard group="Components / Feedback" viewport="800x380" name="Alert" subtitle="An inline message that stays until the condition changes. For transient confirmation use Toast." -->
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Alert</title>
<link rel="stylesheet" href="../../styles.css"><link rel="stylesheet" href="../_card/card.css">
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
<script src="../../_ds_bundle.js"></script>
<script src="../_card/card.js"></script>
</head><body>
<header class="ch"><h1>Alert</h1><p>An inline message that stays until the condition changes. For transient confirmation use Toast.</p></header>
<div id="root"></div>
<ul class="notes">
<li>Status variants use a 4% tint and a 32% border of their hue — never a solid fill.</li>
<li><code>AlertDescription</code> is a flex column, so its children must be block elements — wrap prose in <code>&lt;p style={{margin:0}}&gt;</code>.</li>
<li>Server errors render once, above the form, in an Alert; field errors render on their field. Never both for one submission.</li>
</ul>
<script type="text/babel">
const {Alert, AlertTitle, AlertDescription, AlertAction, Button} = window.OriginDesignSystem_7c998b;
const {Ic, mount} = window.OriginCard;
function Demo(){return (<>
  <Alert variant="warning"><Ic n="triangle-alert" /><AlertTitle>Your Google Calendar is disconnected</AlertTitle><AlertDescription><p style={{margin:0}}>New bookings will not be checked for conflicts.</p></AlertDescription><AlertAction><Button size="sm" variant="outline">Reconnect</Button></AlertAction></Alert>
  <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
    <Alert variant="success"><Ic n="check" /><AlertTitle>Payment received</AlertTitle></Alert>
    <Alert variant="info"><Ic n="info" /><AlertTitle>Beta feature</AlertTitle></Alert>
    <Alert variant="error"><Ic n="circle-x" /><AlertTitle>Sync failed</AlertTitle></Alert>
    <Alert><Ic n="bell" /><AlertTitle>Neutral notice</AlertTitle></Alert>
  </div>
</>)}
mount(<Demo />);
</script>
</body></html>