Alert

1<div role="alert">2  <h4>Heads up!</h4>3  <p>You can add components to your app using the CLI — or just plain HTML.</p>4</div>5 

1<div style="display:grid; gap:1rem; max-width:28rem;">2  <div role="alert">3    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" /></svg>4    <h4>Payment successful</h4>5    <p>Your payment of $29.99 has been processed. A receipt has been sent to your email address.</p>6  </div>7  <div role="alert">8    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>9    <h4>New feature available</h4>10    <p>We've added dark mode support. You can enable it in your account settings.</p>11  </div>12</div>13 

1<div role="alert" data-variant="destructive">2  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" /></svg>3  <h4>Payment failed</h4>4  <p>Your payment could not be processed. Please check your payment method and try again.</p>5</div>6 

1<div role="alert">2  <h4>Dark mode is now available</h4>3  <p>Enable it under your profile settings to get started.</p>4  <div><button type="button" class="xs">Enable</button></div>5</div>6 

1<div role="alert" style="border-color: light-dark(#fde68a, #78350f); background: light-dark(#fffbeb, #451a03); color: light-dark(#92400e, #fef3c7);">2  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path d="M12 9v4" /><path d="M12 17h.01" /></svg>3  <h4>Your subscription will expire in 3 days.</h4>4  <p>Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.</p>5</div>6 

1<div role="alert" data-variant="success">2  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="m9 12 2 2 4-4" /></svg>3  <h4>Saved</h4>4  <p>Your changes were synced to the workspace.</p>5</div>6<div role="alert" data-variant="warning">7  <h4>Storage almost full</h4>8  <p>You have used 92% of your quota.</p>9</div>10 

1<div role="alert">2  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" /></svg>3  <h4>Account updated successfully</h4>4  <p>Your profile information has been saved. Changes will be reflected immediately.</p>5</div>6 

1<button type="button" class="outline" command="show-modal" commandfor="alert-dialog-basic">Show Dialog</button>2 3<dialog id="alert-dialog-basic">4  <form method="dialog">5    <header>6      <h3>Are you absolutely sure?</h3>7      <p>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>8    </header>9    <footer>10      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-basic">Cancel</button>11      <button type="submit" value="continue">Continue</button>12    </footer>13  </form>14</dialog>15 

1<button type="button" class="outline" command="show-modal" commandfor="alert-dialog-demo">Show Dialog</button>2 3<dialog id="alert-dialog-demo">4  <form method="dialog">5    <header>6      <h3>Are you absolutely sure?</h3>7      <p>This action cannot be undone. This will permanently delete your account from our servers.</p>8    </header>9    <footer>10      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-demo">Cancel</button>11      <button type="submit" value="continue">Continue</button>12    </footer>13  </form>14</dialog>15 

1<button type="button" data-variant="danger" command="show-modal" commandfor="alert-dialog-destructive">Delete Chat</button>2 3<dialog id="alert-dialog-destructive" style="max-width:24rem;">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:color-mix(in srgb, var(--destructive) 10%, transparent); color:var(--destructive); border-radius:var(--radius-small); margin-bottom:var(--space-2);">7        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" /></svg>8      </div>9      <h3>Delete chat?</h3>10      <p>This will permanently delete this chat conversation. View <a href="#">Settings</a> to delete any memories saved during this chat.</p>11    </header>12    <footer>13      <button type="button" class="outline" value="cancel" command="close" commandfor="alert-dialog-destructive">Cancel</button>14      <button type="submit" value="delete" data-variant="danger">Delete</button>15    </footer>16  </form>17</dialog>18 

1<button type="button" class="outline" command="show-modal" commandfor="alert-dialog-media">Share Project</button>2 3<dialog id="alert-dialog-media">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:var(--muted); border-radius:var(--radius-small); margin-bottom:var(--space-2);">7        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 5a3 3 0 0 0-5.908 1.177A3 3 0 0 0 8 5a3 3 0 0 0 0 6h8a3 3 0 0 0 0-6Z" /><path d="M12 17a3 3 0 0 0 3-3v-1" /><circle cx="12" cy="12" r="10" /></svg>8      </div>9      <h3>Share this project?</h3>10      <p>Anyone with the link will be able to view and edit this project.</p>11    </header>12    <footer>13      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-media">Cancel</button>14      <button type="submit" value="share">Share</button>15    </footer>16  </form>17</dialog>18 

1<div dir="rtl" style="display:flex; gap:var(--space-4);">2  <button type="button" class="outline" command="show-modal" commandfor="alert-dialog-rtl">إظهار الحوار</button>3  <button type="button" class="outline" command="show-modal" commandfor="alert-dialog-rtl-sm">إظهار الحوار (صغير)</button>4</div>5 6<dialog id="alert-dialog-rtl" dir="rtl">7  <form method="dialog">8    <header>9      <h3>هل أنت متأكد تمامًا؟</h3>10      <p>لا يمكن التراجع عن هذا الإجراء. سيؤدي هذا إلى حذف حسابك نهائيًا من خوادمنا.</p>11    </header>12    <footer>13      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-rtl">إلغاء</button>14      <button type="submit" value="continue">متابعة</button>15    </footer>16  </form>17</dialog>18 19<dialog id="alert-dialog-rtl-sm" dir="rtl" style="max-width:24rem;">20  <form method="dialog">21    <header style="align-items:center; text-align:center;">22      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:var(--muted); border-radius:var(--radius-small); margin-bottom:var(--space-2);">23        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 7 10 10-5 5V2l5 5L7 17" /></svg>24      </div>25      <h3>السماح للملحق بالاتصال؟</h3>26      <p>هل تريد السماح لملحق USB بالاتصال بهذا الجهاز؟</p>27    </header>28    <footer style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);">29      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-rtl-sm">عدم السماح</button>30      <button type="submit" value="allow">السماح</button>31    </footer>32  </form>33</dialog>34 

1<button type="button" class="outline" command="show-modal" commandfor="alert-dialog-small-media">Show Dialog</button>2 3<dialog id="alert-dialog-small-media" style="max-width:24rem;">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <div style="display:inline-flex; width:2.5rem; height:2.5rem; align-items:center; justify-content:center; background:var(--muted); border-radius:var(--radius-small); margin-bottom:var(--space-2);">7        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 7 10 10-5 5V2l5 5L7 17" /></svg>8      </div>9      <h3>Allow accessory to connect?</h3>10      <p>Do you want to allow the USB accessory to connect to this device?</p>11    </header>12    <footer style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);">13      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-small-media">Don't allow</button>14      <button type="submit" value="allow">Allow</button>15    </footer>16  </form>17</dialog>18 

1<button type="button" class="outline" command="show-modal" commandfor="alert-dialog-small">Show Dialog</button>2 3<dialog id="alert-dialog-small" style="max-width:24rem;">4  <form method="dialog">5    <header style="align-items:center; text-align:center;">6      <h3>Allow accessory to connect?</h3>7      <p>Do you want to allow the USB accessory to connect to this device?</p>8    </header>9    <footer style="display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2);">10      <button type="button" class="ghost" value="cancel" command="close" commandfor="alert-dialog-small">Don't allow</button>11      <button type="submit" value="allow">Allow</button>12    </footer>13  </form>14</dialog>15 

1<div dir="rtl" style="display:grid; gap:1rem; max-width:28rem;">2  <div role="alert">3    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.801 10A10 10 0 1 1 17 3.335" /><path d="m9 11 3 3L22 4" /></svg>4    <h4>تم الدفع بنجاح</h4>5    <p>تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.</p>6  </div>7  <div role="alert">8    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg>9    <h4>ميزة جديدة متاحة</h4>10    <p>لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.</p>11  </div>12</div>13