Alert
=====

.. raw:: html

   <style data-uid="hXdYW3t-_5E">@keyframes quirl-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes quirl-shimmer{0%{background-position:150% 0;}100%{background-position:-150% 0;}}@keyframes quirl-fade-in{from{opacity:0;}to{opacity:1;}}@keyframes quirl-scale-in{from{opacity:0;transform:scale(0.92);}to{opacity:1;transform:scale(1);}}@keyframes quirl-slide-up{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}@keyframes quirl-bounce-dot{0%,80%,100%{transform:scale(0.6);opacity:0.5;}40%{transform:scale(1);opacity:1;}}</style><div data-uid="RfD7dYk3B4E" id="alert-docs" style="padding:clamp(20px, 5vw, 32px);gap:20px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;background:#111318;border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;max-width:720px;width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;animation:quirl-fade-in 0.3s ease-out;-webkit-animation:quirl-fade-in 0.3s ease-out;-moz-animation:quirl-fade-in 0.3s ease-out;-o-animation:quirl-fade-in 0.3s ease-out"><div data-uid="0.0" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><h2 data-uid="0.0.0" style="margin:0;color:#F5F5F5">Alert</h2><span data-uid="0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5C842 16%, transparent);color:#F5C842;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">Component</span></div><p data-uid="0.1" style="margin:0;color:rgba(245, 245, 245, 0.6);line-height:1.5">A contextual alert banner for notifications and feedback.</p><div data-uid="0.2" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.2.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.3" style="display:flex;flex-direction:column;gap:16px"><div data-uid="0.3.0" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.0.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.0.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Required Props</h4><span data-uid="0.3.0.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #FF9F0A 16%, transparent);color:#FF9F0A;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">1</span></div><div data-uid="0.3.0.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.0.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.0.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.0.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">description</p></div><p data-uid="0.3.0.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">The alert message body</p></div></div></div><div data-uid="0.3.1" style="display:flex;flex-direction:column;gap:8px"><div data-uid="0.3.1.0" style="display:flex;align-items:center;gap:8px"><h4 data-uid="0.3.1.0.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Optional Props</h4><span data-uid="0.3.1.0.1" style="display:inline-flex;-webkit-box:inline-flex;-moz-box:inline-flex;-ms-flexbox:inline-flex;-webkit-flex:inline-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;border-radius:9999px;font-weight:600;line-height:1;background:color-mix(in srgb, #F5F5F5 16%, transparent);color:#F5F5F5;animation:quirl-scale-in 0.2s ease-out;-webkit-animation:quirl-scale-in 0.2s ease-out;-moz-animation:quirl-scale-in 0.2s ease-out;-o-animation:quirl-scale-in 0.2s ease-out;padding:2px 8px;font-size:0.75rem">3</span></div><div data-uid="0.3.1.1" style="display:flex;flex-direction:column;gap:6px"><div data-uid="0.3.1.1.0" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.0.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.0.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">title</p></div><p data-uid="0.3.1.1.0.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Optional bold heading above the description</p></div><div data-uid="0.3.1.1.1" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.1.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.1.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">variant</p></div><p data-uid="0.3.1.1.1.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">One of info, success, warning, error. Defaults to info.</p></div><div data-uid="0.3.1.1.2" style="display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:#1C1F26"><div data-uid="0.3.1.1.2.0" style="display:flex;gap:6px;align-items:baseline"><p data-uid="0.3.1.1.2.0.0" style="margin:0;font-family:monospace;font-weight:600;color:#F5C842">dismissible</p></div><p data-uid="0.3.1.1.2.1" style="margin:0;color:rgba(245, 245, 245, 0.6)">Show a close button. Defaults to False.</p></div></div></div></div><div data-uid="0.4" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.4.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.5" style="flex-direction:column;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><h4 data-uid="0.5.0" style="margin:0;font-size:0.9rem;color:#F5F5F5">Usage</h4><div data-uid="0.5.1" style="border-radius:8px;overflow:hidden;max-width:100%"><pre data-uid="0.5.1.0" id="code-block" class="code-block" style="border:1px solid rgba(255, 255, 255, 0.12);border-radius:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;gap:8px;padding:12px 16px;width:100%;background:black;margin:0;color:#F5F5F5;font-family:monospace;font-size:0.85rem;line-height:1.5;max-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-overflow-scrolling:touch"><div data-uid="0.5.1.0.0" class="code-header" id="code-header" style="justify-content:space-between;align-items:center;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><div data-uid="0.5.1.0.0.0" class="code-header-actions" style="align-items:center;gap:8px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><span data-uid="0.5.1.0.0.0.0" class="code-language-label" style="color:rgba(245, 245, 245, 0.6);font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em">python</span><div onclick="copyCode(this);" role="button" tabindex="0" aria-label="Copy code" data-uid="0.5.1.0.0.0.1" class="code-copy-btn" id="code-copy-btn" style="align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;cursor:pointer;color:rgba(255, 255, 255, 0.7);transition:background 0.2s ease, color 0.2s ease;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><span data-uid="0.5.1.0.0.0.1.0" class="code-copy-icon-idle"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M4 16V5a1 1 0 0 1 1-1h11"/></svg></span><span data-uid="0.5.1.0.0.0.1.1" class="code-copy-icon-success"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12l6 6 10-14"/></svg></span></div></div></div><div data-uid="0.5.1.0.1" class="code-body" style="position:relative;overflow:hidden;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex"><code data-uid="0.5.1.0.1.0" class="code-block-content language-python" style="overflow-x:auto;overflow-y:hidden;white-space:pre;box-shadow:none;color:#F5F5F5">Alert(
       title='Success',
       description='Your profile has been updated.',
       variant='success',
       dismissible=True,
   )</code></div><script data-uid="0.5.1.0.2">function copyCode(button) {
   const codeBlock = button.closest("pre");
   const code = codeBlock ? codeBlock.querySelector("code") : null;
   if (!code) {
   return;
   }
   if (!navigator.clipboard) {
   console.warn("Clipboard API unavailable, copy requires a secure (HTTPS) context.");
   return;
   }
   navigator.clipboard.writeText(code.innerText)
   .then(() => {
   button.classList.add("copied");
   setTimeout(() => button.classList.remove("copied"), 2000);
   })
   .catch((err) => console.error("Failed to copy code: ", err));
   }</script><style data-uid="0.5.1.0.3">.code-copy-btn:hover,.code-collapse-footer:hover{background:rgba(255,255,255,0.1);}.code-collapse-footer:hover{color:#F5F5F5;}.code-copy-btn .code-copy-icon-success{display:none;}.code-copy-btn.copied .code-copy-icon-idle{display:none;}.code-copy-btn.copied .code-copy-icon-success{display:inline-flex;}.code-block.collapsible .code-body{max-height:320px;}.code-block.collapsible.expanded .code-body{max-height:none;}.code-fade{position:absolute;left:0;right:0;bottom:0;height:56px;background:linear-gradient(to bottom,transparent,black);pointer-events:none;}.code-block.expanded .code-fade{display:none !important;}.code-collapse-footer{color:rgba(245,245,245,0.6);font-size:0.8rem;font-weight:500;}.code-collapse-label-less{display:none;}.code-block.expanded .code-collapse-label-more{display:none;}.code-block.expanded .code-collapse-label-less{display:inline;}.code-collapse-icon{transition:transform 0.2s ease;}.code-block.expanded .code-collapse-icon{transform:rotate(180deg);}</style></pre></div></div><div data-uid="0.6" role="separator" aria-orientation="horizontal" style="display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;gap:12px;width:100%;margin:20px 0"><div data-uid="0.6.0" style="height:1px;background:rgba(255, 255, 255, 0.12);flex:1"></div></div><div data-uid="0.7" style="border:1px solid rgba(255, 255, 255, 0.12);border-radius:12px;padding:clamp(16px, 4vw, 24px);overflow:hidden;background:#1C1F26;box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.24);max-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;flex-direction:column;-webkit-flex-direction:column;-ms-flex-direction:column;gap:4px"><h4 data-uid="0.7.0" style="margin:0;color:#F5F5F5">Live Preview</h4><div data-uid="0.7.1" id="demo-Coc9w2JJDOM-stage" style="position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:72px;width:100%;box-sizing:border-box;padding:8px 0"><div data-uid="0.7.1.0" style="padding:16px;border-radius:12px;display:flex;-webkit-box:flex;-moz-box:flex;-ms-flexbox:flex;-webkit-flex:flex;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;gap:12px;background:color-mix(in srgb, #30D158 12%, transparent);color:#30D158;animation:quirl-slide-up 0.25s ease-out;-webkit-animation:quirl-slide-up 0.25s ease-out;-moz-animation:quirl-slide-up 0.25s ease-out;-o-animation:quirl-slide-up 0.25s ease-out"><div data-uid="0.7.1.0.0" style="width:8px;height:8px;min-width:8px;margin-top:6px;border-radius:50%;background:#30D158"></div><div data-uid="0.7.1.0.1" style="display:flex;flex-direction:column;gap:4px;flex:1"><h5 data-uid="0.7.1.0.1.0" style="margin:0;color:inherit;font-weight:600">Success</h5><p data-uid="0.7.1.0.1.1" style="margin:0;color:inherit;opacity:0.9">Your profile has been updated.</p></div><button aria-label="Dismiss" data-uid="0.7.1.0.2" role="button" type="button" data-events="click" style="padding:0;width:24px;height:24px;min-width:24px;border-radius:50%;font-size:1rem;line-height:1;display:flex;align-items:center;justify-content:center;background:transparent;color:inherit;border:none;cursor:pointer;transition:0.15s cubic-bezier(0.4, 0, 0.2, 1)">×</button></div><div data-uid="0.7.1.1" class="demo-cursor" id="demo-Coc9w2JJDOM-cursor" style="position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(59, 130, 246, 0.3);border:2px solid #3b82f6;pointer-events:none;z-index:1000;transition:all 0.5s ease-in-out;opacity:0;top:50%;left:50%;transform:translate(-50%, -50%)"></div></div><style data-uid="0.7.2">#demo-Coc9w2JJDOM-stage .demo-highlight{animation:demo-pulse 0.8s ease-in-out;}@keyframes demo-pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,0.4);}50%{box-shadow:0 0 0 8px rgba(59,130,246,0);}}@media(max-width:480px){#demo-Coc9w2JJDOM{padding:16px;}}</style><script data-uid="0.7.3">(function() {
   const steps = [{"delay": 1500, "cursor": {"target": "button"}, "target": "button", "action": {"type": "click"}}, {"delay": 1500}];
   if (!steps.length) return;
   const stage = document.getElementById('demo-Coc9w2JJDOM-stage');
   const cursor = document.getElementById('demo-Coc9w2JJDOM-cursor');
   let index = 0;
   function runAction(target, action) {
   const fireDelay = action.delay ?? 400;
   setTimeout(() => {
   switch (action.type) {
   case 'click':
   if (target) target.click();
   break;
   case 'input':
   if (target) {
   target.focus();
   target.value = action.value ?? '';
   target.dispatchEvent(new Event('input', {bubbles: true}));
   }
   break;
   case 'toggle_class':
   if (target && action.class_name) {
   target.classList.toggle(action.class_name);
   }
   break;
   case 'focus':
   if (target) target.focus();
   break;
   case 'scroll_into_view':
   if (target) {
   target.scrollIntoView({behavior: 'smooth', block: 'center'});
   }
   break;
   default:
   break;
   }
   }, fireDelay);
   }
   function positionCursor(step) {
   if (!cursor) return;
   if (step.cursor && step.cursor.target) {
   const el = stage.querySelector(step.cursor.target);
   if (el) {
   const stageRect = stage.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   cursor.style.top = `${elRect.top - stageRect.top + elRect.height / 2}px`;
   cursor.style.left = `${elRect.left - stageRect.left + elRect.width / 2}px`;
   cursor.style.opacity = '1';
   } else {
   cursor.style.opacity = '0';
   }
   } else if (step.cursor) {
   cursor.style.top = step.cursor.top || '50%';
   cursor.style.left = step.cursor.left || '50%';
   cursor.style.opacity = '1';
   } else {
   cursor.style.opacity = '0';
   }
   }
   function applyStep(step) {
   positionCursor(step);
   const target = step.target ? stage.querySelector(step.target) : null;
   if (step.target && target) {
   target.classList.add('demo-highlight');
   setTimeout(() => target.classList.remove('demo-highlight'), 800);
   }
   if (step.action) {
   runAction(target, step.action);
   }
   }
   function nextStep() {
   const step = steps[index];
   applyStep(step);
   index = (index + 1) % steps.length;
   setTimeout(nextStep, step.delay || 2000);
   }
   setTimeout(nextStep, 800);
   })();</script></div></div>