mjs/nebula
mjs/nebula
1
0
Fork 0
mirror of https://github.com/onsonr/nebula.git synced 2025-03-11 09:49:12 +00:00
Code Issues Packages Projects Releases Wiki Activity
nebula/components/alert/index.html

1898 lines
155 KiB
HTML
Raw Normal View History

deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<!doctype html>
<html lang="en" data-layout="component" data-shoelace-version="0.0.10">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Alerts are used to display important messages inline or as toast notifications."
/>
<title>Alert</title>
<meta name="turbo-cache-control" />
<link rel="stylesheet" href="/assets/styles/docs.css" />
<link rel="stylesheet" href="/assets/styles/code-previews.css" />
<link rel="stylesheet" href="/assets/styles/search.css" />
<link rel="icon" href="/assets/images/logo.svg" type="image/x-icon" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:creator" content="shoelace_style" />
<meta name="twitter:image" content="https://nebulaui.org/assets/images/og-image.png" />
<meta property="og:url" content="https://nebulaui.org/components/alert/" />
<meta property="og:title" content="Alert" />
<meta
property="og:description"
content="Alerts are used to display important messages inline or as toast notifications."
/>
<meta property="og:image" content="https://nebulaui.org/assets/images/og-image.png" />
<link rel="stylesheet" href="/dist/themes/light.css" />
<link rel="stylesheet" href="/dist/themes/dark.css" />
<script type="module" src="/dist/shoelace-autoloader.js"></script>
<script>
(() => {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = localStorage.getItem('theme') || 'auto';
document.documentElement.classList.toggle(
'sl-theme-dark',
theme === 'dark' || (theme === 'auto' && prefersDark)
);
})();
</script>
<script src="/assets/scripts/turbo.js" type="module"></script>
<script src="/assets/scripts/docs.js" defer=""></script>
<script src="/assets/scripts/code-previews.js" defer=""></script>
<script src="/assets/scripts/lunr.js" defer=""></script>
<script src="/assets/scripts/search.js" defer=""></script>
</head>
<body>
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
Skip to main content
</a>
<button id="menu-toggle" type="button" aria-label="Menu">
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
</g>
</svg>
</button>
<div id="icon-toolbar">
<a
href="https://github.com/onsonr/nebula"
title="View Nebula on GitHub"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>
<sl-icon name="github"></sl-icon>
</a>
<a
href="https://twitter.com/shoelace_style"
title="Follow Nebula on Twitter"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>
<sl-icon name="twitter"></sl-icon>
</a>
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
<sl-button slot="trigger" size="small" variant="text" caret="" title="Press \ to toggle">
<sl-icon class="only-light" name="sun-fill"></sl-icon>
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
</sl-button>
<sl-menu>
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
<sl-divider></sl-divider>
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
</sl-menu>
</sl-dropdown>
</div>
<aside id="sidebar" data-preserve-scroll="">
<header>
<a href="/">
<img src="/assets/images/wordmark.svg" alt="Nebula" />
</a>
<div class="sidebar-version">0.0.10</div>
</header>
<div class="sidebar-buttons">
<sl-button
size="small"
class="repo-button repo-button--github"
href="https://github.com/onsonr/nebula"
target="_blank"
>
<sl-icon slot="prefix" name="github"></sl-icon> Code
</sl-button>
<sl-button
size="small"
class="repo-button repo-button--star"
href="https://github.com/onsonr/nebula/stargazers"
target="_blank"
>
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
</sl-button>
<sl-button
size="small"
class="repo-button repo-button--twitter"
href="https://twitter.com/shoelace_style"
target="_blank"
>
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
</sl-button>
</div>
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
<sl-icon name="search"></sl-icon>
<span>Search</span>
</button>
<nav>
<ul>
<li>
<h2>Getting Started</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/getting-started/installation">Installation</a></li>
<li><a href="/getting-started/usage">Usage</a></li>
<li><a href="/getting-started/themes">Themes</a></li>
<li><a href="/getting-started/customizing">Customizing</a></li>
<li><a href="/getting-started/form-controls">Form Controls</a></li>
<li><a href="/getting-started/localization">Localization</a></li>
</ul>
</li>
<li>
<h2>Frameworks</h2>
<ul>
<li><a href="/frameworks/react">React</a></li>
<li><a href="/frameworks/vue">Vue</a></li>
<li><a href="/frameworks/angular">Angular</a></li>
</ul>
</li>
<li>
<h2>Resources</h2>
<ul>
<li><a href="/resources/community">Community</a></li>
<li>
<a
href="https://github.com/onsonr/nebula/discussions"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>Help &amp; Support</a
>
</li>
<li><a href="/resources/accessibility">Accessibility</a></li>
<li><a href="/resources/contributing">Contributing</a></li>
<li><a href="/resources/changelog">Changelog</a></li>
</ul>
</li>
<li>
<h2>Components</h2>
<ul>
<li>
<a href="/components/alert" class="active-link"> Alert </a>
</li>
<li>
<a href="/components/animated-image"> Animated Image </a>
</li>
<li>
<a href="/components/animation"> Animation </a>
</li>
<li>
<a href="/components/avatar"> Avatar </a>
</li>
<li>
<a href="/components/badge"> Badge </a>
</li>
<li>
<a href="/components/breadcrumb"> Breadcrumb </a>
</li>
<li>
<a href="/components/breadcrumb-item"> Breadcrumb Item </a>
</li>
<li>
<a href="/components/button"> Button </a>
</li>
<li>
<a href="/components/button-group"> Button Group </a>
</li>
<li>
<a href="/components/card"> Card </a>
</li>
<li>
<a href="/components/carousel"> Carousel </a>
</li>
<li>
<a href="/components/carousel-item"> Carousel Item </a>
</li>
<li>
<a href="/components/checkbox"> Checkbox </a>
</li>
<li>
<a href="/components/color-picker"> Color Picker </a>
</li>
<li>
<a href="/components/copy-button"> Copy Button </a>
</li>
<li>
<a href="/components/details"> Details </a>
</li>
<li>
<a href="/components/dialog"> Dialog </a>
</li>
<li>
<a href="/components/divider"> Divider </a>
</li>
<li>
<a href="/components/drawer"> Drawer </a>
</li>
<li>
<a href="/components/dropdown"> Dropdown </a>
</li>
<li>
<a href="/components/format-bytes"> Format Bytes </a>
</li>
<li>
<a href="/components/format-date"> Format Date </a>
</li>
<li>
<a href="/components/format-number"> Format Number </a>
</li>
<li>
<a href="/components/icon"> Icon </a>
</li>
<li>
<a href="/components/icon-button"> Icon Button </a>
</li>
<li>
<a href="/components/image-comparer"> Image Comparer </a>
</li>
<li>
<a href="/components/include"> Include </a>
</li>
<li>
<a href="/components/input"> Input </a>
</li>
<li>
<a href="/components/menu"> Menu </a>
</li>
<li>
<a href="/components/menu-item"> Menu Item </a>
</li>
<li>
<a href="/components/menu-label"> Menu Label </a>
</li>
<li>
<a href="/components/mutation-observer"> Mutation Observer </a>
</li>
<li>
<a href="/components/option"> Option </a>
</li>
<li>
<a href="/components/popup"> Popup </a>
</li>
<li>
<a href="/components/progress-bar"> Progress Bar </a>
</li>
<li>
<a href="/components/progress-ring"> Progress Ring </a>
</li>
<li>
<a href="/components/qr-code"> QR Code </a>
</li>
<li>
<a href="/components/radio"> Radio </a>
</li>
<li>
<a href="/components/radio-button"> Radio Button </a>
</li>
<li>
<a href="/components/radio-group"> Radio Group </a>
</li>
<li>
<a href="/components/range"> Range </a>
</li>
<li>
<a href="/components/rating"> Rating </a>
</li>
<li>
<a href="/components/relative-time"> Relative Time </a>
</li>
<li>
<a href="/components/resize-observer"> Resize Observer </a>
</li>
<li>
<a href="/components/select"> Select </a>
</li>
<li>
<a href="/components/skeleton"> Skeleton </a>
</li>
<li>
<a href="/components/spinner"> Spinner </a>
</li>
<li>
<a href="/components/split-panel"> Split Panel </a>
</li>
<li>
<a href="/components/switch"> Switch </a>
</li>
<li>
<a href="/components/tab"> Tab </a>
</li>
<li>
<a href="/components/tab-group"> Tab Group </a>
</li>
<li>
<a href="/components/tab-panel"> Tab Panel </a>
</li>
<li>
<a href="/components/tag"> Tag </a>
</li>
<li>
<a href="/components/textarea"> Textarea </a>
</li>
<li>
<a href="/components/tooltip"> Tooltip </a>
</li>
<li>
<a href="/components/tree"> Tree </a>
</li>
<li>
<a href="/components/tree-item"> Tree Item </a>
</li>
<li>
<a href="/components/visually-hidden"> Visually Hidden </a>
</li>
</ul>
</li>
<li>
<h2>Design Tokens</h2>
<ul>
<li><a href="/tokens/typography">Typography</a></li>
<li><a href="/tokens/color">Color</a></li>
<li><a href="/tokens/spacing">Spacing</a></li>
<li><a href="/tokens/elevation">Elevation</a></li>
<li><a href="/tokens/border-radius">Border Radius</a></li>
<li><a href="/tokens/transition">Transition</a></li>
<li><a href="/tokens/z-index">Z-index</a></li>
<li><a href="/tokens/more">More Tokens</a></li>
</ul>
</li>
<li>
<h2>Tutorials</h2>
<ul>
<li><a href="/tutorials/integrating-with-astro">Integrating with Astro</a></li>
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
</ul>
</li>
</ul>
</nav>
</aside>
<main>
<a id="main-content"></a>
<article id="content" class="content content--with-toc">
<div class="content__toc">
<ul>
<li class="top"><a href="#">Alert</a></li>
<li data-level="2"><a href="#examples">Examples</a></li>
<li data-level="3"><a href="#variants">Variants</a></li>
<li data-level="3"><a href="#closable">Closable</a></li>
<li data-level="3"><a href="#without-icons">Without Icons</a></li>
<li data-level="3"><a href="#duration">Duration</a></li>
<li data-level="3"><a href="#toast-notifications">Toast Notifications</a></li>
<li data-level="3"><a href="#creating-toasts-imperatively">Creating Toasts Imperatively</a></li>
<li data-level="3"><a href="#the-toast-stack">The Toast Stack</a></li>
<li data-level="2"><a href="#importing">Importing</a></li>
<li data-level="2"><a href="#slots">Slots</a></li>
<li data-level="2"><a href="#properties">Properties</a></li>
<li data-level="2"><a href="#events">Events</a></li>
<li data-level="2"><a href="#methods">Methods</a></li>
<li data-level="2"><a href="#parts">Parts</a></li>
<li data-level="2"><a href="#animations">Animations</a></li>
<li data-level="2"><a href="#dependencies">Dependencies</a></li>
</ul>
</div>
<div class="content__body">
<header class="component-header">
<h1>Alert</h1>
<div class="component-header__tag">
<code>&lt;sl-alert&gt; | SlAlert</code>
</div>
<div class="component-header__info">
<sl-badge variant="neutral" pill=""> Since 2.0 </sl-badge>
<sl-badge variant="primary" pill="" style="text-transform: capitalize"> stable </sl-badge>
</div>
</header>
<p class="component-summary">
Alerts are used to display important messages inline or as toast notifications.
</p>
<div class="code-preview">
<div class="code-preview__preview">
<sl-alert open="">
<sl-icon slot="icon" name="info-circle"></sl-icon>
This is a standard alert. You can customize its content and even the icon.
</sl-alert>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-9">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-149"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
This is a standard alert. You can customize its content and even the icon.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-149"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-150"><span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
This is a standard alert. You can customize its content and even the icon.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-150"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-9"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<div role="alert" class="callout callout--tip">
<p>Alerts will not be visible if the <code>open</code> attribute is not present.</p>
</div>
<h2 id="examples" class="anchor-heading">
Examples<a href="#examples" aria-label='Direct link to "Examples"'></a>
</h2>
<h3 id="variants" class="anchor-heading">
Variants<a href="#variants" aria-label='Direct link to "Variants"'></a>
</h3>
<p>Set the <code>variant</code> attribute to change the alert’s variant.</p>
<div class="code-preview">
<div class="code-preview__preview">
<sl-alert variant="primary" open="">
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</sl-alert>
<br />
<sl-alert variant="success" open="">
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</sl-alert>
<br />
<sl-alert variant="neutral" open="">
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br />
Settings will take effect on next login.
</sl-alert>
<br />
<sl-alert variant="warning" open="">
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</sl-alert>
<br />
<sl-alert variant="danger" open="">
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br />
We’re very sorry to see you go!
</sl-alert>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-10">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-151"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is super informative<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
You can tell by how pretty the alert is.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check2-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your changes have been saved<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
You can safely exit the app now.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your settings have been updated<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Settings will take effect on next login.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your session has ended<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Please login again to continue.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-octagon<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your account has been deleted<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
We're very sorry to see you go!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-151"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-152"><span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is super informative</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
You can tell by how pretty the alert is.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check2-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your changes have been saved</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
You can safely exit the app now.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your settings have been updated</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
Settings will take effect on next login.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your session has ended</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
Please login again to continue.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-octagon<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your account has been deleted</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
We're very sorry to see you go!
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-152"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-10"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="closable" class="anchor-heading">
Closable<a href="#closable" aria-label='Direct link to "Closable"'></a>
</h3>
<p>Add the <code>closable</code> attribute to show a close button that will hide the alert.</p>
<div class="code-preview">
<div class="code-preview__preview">
<sl-alert variant="primary" open="" closable="" class="alert-closable">
<sl-icon slot="icon" name="info-circle"></sl-icon>
You can close this alert any time!
</sl-alert>
<script>
(() => {
const alert = document.querySelector('.alert-closable');
alert.addEventListener('sl-after-hide', () => {
setTimeout(() => (alert.open = true), 2000);
});
})();
</script>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-11">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-153"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">open</span> <span class="token attr-name">closable</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-closable<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
You can close this alert any time!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> alert <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.alert-closable'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
alert<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'sl-after-hide'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>alert<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-153"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-154"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">handleHide</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span></span> <span class="token attr-name">closable</span> <span class="token attr-name">onSlAfterHide</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handleHide<span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
You can close this alert any time!
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-154"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-11"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="without-icons" class="anchor-heading">
Without Icons<a href="#without-icons" aria-label='Direct link to "Without Icons"'></a>
</h3>
<p>Icons are optional. Simply omit the <code>icon</code> slot if you don’t want them.</p>
<div class="code-preview">
<div class="code-preview__preview">
<sl-alert variant="primary" open=""> Nothing fancy here, just a simple alert. </sl-alert>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-12">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-155"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span> Nothing fancy here, just a simple alert. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
</code><sl-copy-button class="copy-code-button" from="code-block-155"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-156"><span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Nothing fancy here, just a simple alert.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-156"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-12"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="duration" class="anchor-heading">
Duration<a href="#duration" aria-label='Direct link to "Duration"'></a>
</h3>
<p>
Set the <code>duration</code> attribute to automatically hide an alert after a period of time. This is
useful for alerts that don’t require acknowledgement.
</p>
<div class="code-preview">
<div class="code-preview__preview">
<div class="alert-duration">
<sl-button variant="primary">Show Alert</sl-button>
<sl-alert variant="primary" duration="3000" closable="">
<sl-icon slot="icon" name="info-circle"></sl-icon>
This alert will automatically hide itself after three seconds, unless you interact with it.
</sl-alert>
</div>
<script>
(() => {
const container = document.querySelector('.alert-duration');
const button = container.querySelector('sl-button');
const alert = container.querySelector('sl-alert');
button.addEventListener('click', () => alert.show());
})();
</script>
<style>
.alert-duration sl-alert {
margin-top: var(--sl-spacing-medium);
}
</style>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-13">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-157"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-duration<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Show Alert<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
This alert will automatically hide itself after three seconds, unless you interact with it.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.alert-duration'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> button <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> alert <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-alert'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> alert<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.alert-duration sl-alert</span> <span class="token punctuation">{</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--sl-spacing-medium<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-157"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-158"><span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> css <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
.alert-duration sl-alert {
margin-top: var(--sl-spacing-medium);
}
</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>open<span class="token punctuation">,</span> setOpen<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-duration<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Show Alert
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">open</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>open<span class="token punctuation">}</span></span> <span class="token attr-name">closable</span> <span class="token attr-name">onSlAfterHide</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token function">setOpen</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
This alert will automatically hide itself after three seconds, unless you interact with it.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">{css}</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-158"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-13"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="toast-notifications" class="anchor-heading">
Toast Notifications<a href="#toast-notifications" aria-label='Direct link to "Toast Notifications"'></a>
</h3>
<p>
To display an alert as a toast notification, or “toast”, create the alert and call its
<code>toast()</code> method. This will move the alert out of its position in the DOM and into
<a href="#the-toast-stack">the toast stack</a> where it will be shown. Once dismissed, it will be removed
from the DOM completely. To reuse a toast, store a reference to it and call <code>toast()</code> again later
on.
</p>
<p>
You should always use the <code>closable</code> attribute so users can dismiss the notification. It’s also
common to set a reasonable <code>duration</code> when the notification doesn’t require acknowledgement.
</p>
<div class="code-preview">
<div class="code-preview__preview">
<div class="alert-toast">
<sl-button variant="primary">Primary</sl-button>
<sl-button variant="success">Success</sl-button>
<sl-button variant="neutral">Neutral</sl-button>
<sl-button variant="warning">Warning</sl-button>
<sl-button variant="danger">Danger</sl-button>
<sl-alert variant="primary" duration="3000" closable="">
<sl-icon slot="icon" name="info-circle"></sl-icon>
<strong>This is super informative</strong><br />
You can tell by how pretty the alert is.
</sl-alert>
<sl-alert variant="success" duration="3000" closable="">
<sl-icon slot="icon" name="check2-circle"></sl-icon>
<strong>Your changes have been saved</strong><br />
You can safely exit the app now.
</sl-alert>
<sl-alert variant="neutral" duration="3000" closable="">
<sl-icon slot="icon" name="gear"></sl-icon>
<strong>Your settings have been updated</strong><br />
Settings will take effect on next login.
</sl-alert>
<sl-alert variant="warning" duration="3000" closable="">
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
<strong>Your session has ended</strong><br />
Please login again to continue.
</sl-alert>
<sl-alert variant="danger" duration="3000" closable="">
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
<strong>Your account has been deleted</strong><br />
We’re very sorry to see you go!
</sl-alert>
</div>
<script>
(() => {
const container = document.querySelector('.alert-toast');
['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
const button = container.querySelector(`sl-button[variant="${variant}"]`);
const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
button.addEventListener('click', () => alert.toast());
});
})();
</script>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-14">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html" data-flavor="html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-159"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-toast<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Primary<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Success<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Neutral<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Warning<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Danger<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>This is super informative<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
You can tell by how pretty the alert is.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check2-circle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your changes have been saved<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
You can safely exit the app now.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your settings have been updated<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Settings will take effect on next login.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your session has ended<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
Please login again to continue.
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-alert</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-icon</span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-octagon<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-icon</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span>Your account has been deleted<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span>
We're very sorry to see you go!
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-alert</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.alert-toast'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">[</span><span class="token string">'primary'</span><span class="token punctuation">,</span> <span class="token string">'success'</span><span class="token punctuation">,</span> <span class="token string">'neutral'</span><span class="token punctuation">,</span> <span class="token string">'warning'</span><span class="token punctuation">,</span> <span class="token string">'danger'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">variant</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> button <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">sl-button[variant="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>variant<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> alert <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">sl-alert[variant="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>variant<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">"]</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> alert<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-159"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
<div class="code-preview__source code-preview__source--react" data-flavor="react">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-jsx" id="code-block-160"><span class="token keyword">import</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlButton <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/button'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> SlIcon <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/icon'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">showToast</span><span class="token punctuation">(</span><span class="token parameter">alert</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
alert<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> primary <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> success <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> neutral <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> warning <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> danger <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> primary<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Primary
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> success<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Success
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> neutral<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Neutral
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> warning<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Warning
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlButton</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> danger<span class="token punctuation">.</span>current<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
Danger
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlButton</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>primary<span class="token punctuation">}</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">This is super informative</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
You can tell by how pretty the alert is.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>success<span class="token punctuation">}</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>check2-circle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your changes have been saved</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
You can safely exit the app now.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>neutral<span class="token punctuation">}</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>neutral<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gear<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your settings have been updated</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
Settings will take effect on next login.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>warning<span class="token punctuation">}</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-triangle<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your session has ended</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
Please login again to continue.
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlAlert</span></span> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>danger<span class="token punctuation">}</span></span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token attr-name">duration</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3000<span class="token punctuation">"</span></span> <span class="token attr-name">closable</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SlIcon</span></span> <span class="token attr-name">slot</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>icon<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>exclamation-octagon<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Your account has been deleted</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/&gt;</span></span><span class="token plain-text">
We're very sorry to see you go!
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SlAlert</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-160"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-14"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" title="Show HTML code" class="code-preview__button code-preview__button--html">
HTML
</button>
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
React
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="creating-toasts-imperatively" class="anchor-heading">
Creating Toasts Imperatively<a
href="#creating-toasts-imperatively"
aria-label='Direct link to "Creating Toasts Imperatively"'
></a>
</h3>
<p>
For convenience, you can create a utility that emits toast notifications with a function call rather than
composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call
the <code>toast()</code> method as shown in the example below.
</p>
<div class="code-preview">
<div class="code-preview__preview">
<div class="alert-toast-wrapper">
<sl-button variant="primary">Create Toast</sl-button>
</div>
<script>
(() => {
const container = document.querySelector('.alert-toast-wrapper');
const button = container.querySelector('sl-button');
let count = 0;
// Always escape HTML for text arguments!
function escapeHtml(html) {
const div = document.createElement('div');
div.textContent = html;
return div.innerHTML;
}
// Custom function to emit toast notifications
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
const alert = Object.assign(document.createElement('sl-alert'), {
variant,
closable: true,
duration: duration,
innerHTML: `
<sl-icon name="${icon}" slot="icon"></sl-icon>
${escapeHtml(message)}
`
});
document.body.append(alert);
return alert.toast();
}
button.addEventListener('click', () => {
notify(`This is custom toast #${++count}`);
});
})();
</script>
<div class="code-preview__resizer">
<sl-icon name="grip-vertical"></sl-icon>
</div>
</div>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<div class="code-preview__source-group" id="code-preview-source-group-15">
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div class="code-preview__source code-preview__source--html">
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-161"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>alert-toast-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>sl-button</span> <span class="token attr-name">variant</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>primary<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Create Toast<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>sl-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">const</span> container <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'.alert-toast-wrapper'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> button <span class="token operator">=</span> container<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'sl-button'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
<span class="token comment">// Always escape HTML for text arguments!</span>
<span class="token keyword">function</span> <span class="token function">escapeHtml</span><span class="token punctuation">(</span><span class="token parameter">html</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> div <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
div<span class="token punctuation">.</span>textContent <span class="token operator">=</span> html<span class="token punctuation">;</span>
<span class="token keyword">return</span> div<span class="token punctuation">.</span>innerHTML<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// Custom function to emit toast notifications</span>
<span class="token keyword">function</span> <span class="token function">notify</span><span class="token punctuation">(</span>message<span class="token punctuation">,</span> variant <span class="token operator">=</span> <span class="token string">'primary'</span><span class="token punctuation">,</span> icon <span class="token operator">=</span> <span class="token string">'info-circle'</span><span class="token punctuation">,</span> duration <span class="token operator">=</span> <span class="token number">3000</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">const</span> alert <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'sl-alert'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
variant<span class="token punctuation">,</span>
<span class="token literal-property property">closable</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">duration</span><span class="token operator">:</span> duration<span class="token punctuation">,</span>
<span class="token literal-property property">innerHTML</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
&lt;sl-icon name="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>icon<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" slot="icon"&gt;&lt;/sl-icon&gt;
</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">escapeHtml</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">
</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>alert<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> alert<span class="token punctuation">.</span><span class="token function">toast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
button<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
<span class="token function">notify</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">This is custom toast #</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token operator">++</span>count<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-161"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</div>
</div>
<div class="code-preview__buttons">
<button
type="button"
class="code-preview__button code-preview__toggle"
aria-expanded="false"
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
aria-controls="code-preview-source-group-15"
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
>
Source
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</button>
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
<svg
width="138"
height="26"
viewBox="0 0 138 26"
fill="none"
stroke="currentColor"
stroke-width="2.3"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z"
></path>
</svg>
</button>
</div>
</div>
<h3 id="the-toast-stack" class="anchor-heading">
The Toast Stack<a href="#the-toast-stack" aria-label='Direct link to "The Toast Stack"'></a>
</h3>
<p>
The toast stack is a fixed position singleton element created and managed internally by the alert component.
It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is
visible, they will stack vertically in the toast stack.
</p>
<p>
By default, the toast stack is positioned at the top-right of the viewport. You can change its position by
targeting <code>.sl-toast-stack</code> in your stylesheet. To make toasts appear at the top-left of the
viewport, for example, use the following styles.
</p>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-css" id="code-block-162"><span class="token selector">.sl-toast-stack</span> <span class="token punctuation">{</span>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
</code><sl-copy-button class="copy-code-button" from="code-block-162"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
<div role="alert" class="callout callout--tip">
<p>
By design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is
confusing and makes for a poor user experience.
</p>
</div>
<h2 id="importing" class="anchor-heading">
Importing<a href="#importing" aria-label='Direct link to "Importing"'></a>
</h2>
<p>
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free
to use any of the following snippets to
<a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
</p>
<sl-tab-group>
<sl-tab slot="nav" panel="script">Script</sl-tab>
<sl-tab slot="nav" panel="import">Import</sl-tab>
<sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
<sl-tab slot="nav" panel="react">React</sl-tab>
<sl-tab-panel name="script">
<p>
To import this component from
<a
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>the CDN</a
>
using a script tag:
</p>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-html" id="code-block-163"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>module<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/alert/alert.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code><sl-copy-button class="copy-code-button" from="code-block-163"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</sl-tab-panel>
<sl-tab-panel name="import">
<p>
To import this component from
<a
href="https://www.jsdelivr.com/package/npm/@onsonr/nebula"
class="external-link"
rel="noopener noreferrer"
target="_blank"
>the CDN</a
>
using a JavaScript import:
</p>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-js" id="code-block-164"><span class="token keyword">import</span> <span class="token string">'https://cdn.jsdelivr.net/npm/@onsonr/nebula@0.0.10/cdn/components/alert/alert.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-164"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</sl-tab-panel>
<sl-tab-panel name="bundler">
<p>To import this component using <a href="/getting-started/installation#bundling">a bundler</a>:</p>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-js" id="code-block-165"><span class="token keyword">import</span> <span class="token string">'@onsonr/nebula/dist/components/alert/alert.js'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-165"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</sl-tab-panel>
<sl-tab-panel name="react">
<p>To import this component as a <a href="/frameworks/react">React component</a>:</p>
deploy: ea3dc2b9fe19c5722c62e425134ccda2cd1745d9
2025-01-07 20:25:01 +00:00
<pre><code class="language-js" id="code-block-166"><span class="token keyword">import</span> SlAlert <span class="token keyword">from</span> <span class="token string">'@onsonr/nebula/dist/react/alert'</span><span class="token punctuation">;</span></code><sl-copy-button class="copy-code-button" from="code-block-166"></sl-copy-button></pre>
deploy: 11024fb78c4c6606d19d53775a77f15c00b07437
2024-12-08 20:11:42 +00:00
</sl-tab-panel>
</sl-tab-group>
<h2 id="slots" class="anchor-heading">Slots<a href="#slots" aria-label='Direct link to "Slots"'></a></h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap">(default)</td>
<td>The alert’s main content.</td>
</tr>
<tr>
<td class="nowrap">
<code>icon</code>
</td>
<td>An icon to show in the alert. Works best with <code>&lt;sl-icon&gt;</code>.</td>
</tr>
</tbody>
</table>
</div>
<p>
<em>Learn more about <a href="/getting-started/usage#slots">using slots</a>.</em>
</p>
<h2 id="properties" class="anchor-heading">
Properties<a href="#properties" aria-label='Direct link to "Properties"'></a>
</h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-reflects">Reflects</th>
<th class="table-type">Type</th>
<th class="table-default">Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<code class="nowrap">open</code>
</td>
<td>
Indicates whether or not the alert is open. You can toggle this attribute to show and hide the
alert, or you can use the <code>show()</code> and <code>hide()</code> methods and this attribute
will reflect the alert’s open state.
</td>
<td style="text-align: center">
<sl-icon label="yes" name="check-lg"></sl-icon>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
</tr>
<tr>
<td>
<code class="nowrap">closable</code>
</td>
<td>Enables a close button that allows the user to dismiss the alert.</td>
<td style="text-align: center">
<sl-icon label="yes" name="check-lg"></sl-icon>
</td>
<td>
<code>boolean</code>
</td>
<td>
<code>false</code>
</td>
</tr>
<tr>
<td>
<code class="nowrap">variant</code>
</td>
<td>The alert’s theme variant.</td>
<td style="text-align: center">
<sl-icon label="yes" name="check-lg"></sl-icon>
</td>
<td>
<code>'primary' | 'success' | 'neutral' | 'warning' | 'danger'</code>
</td>
<td>
<code>'primary'</code>
</td>
</tr>
<tr>
<td>
<code class="nowrap">duration</code>
</td>
<td>
The length of time, in milliseconds, the alert will show before closing itself. If the user
interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart.
Defaults to <code>Infinity</code>, meaning the alert will not close on its own.
</td>
<td style="text-align: center"></td>
<td>-</td>
<td>
<code>Infinity</code>
</td>
</tr>
<tr>
<td class="nowrap"><code>updateComplete</code></td>
<td>
A read-only promise that resolves when the component has
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<p>
<em
>Learn more about
<a href="/getting-started/usage#attributes-and-properties">attributes and properties</a>.</em
>
</p>
<h2 id="events" class="anchor-heading">Events<a href="#events" aria-label='Direct link to "Events"'></a></h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name" data-flavor="html">Name</th>
<th class="table-name" data-flavor="react">React Event</th>
<th class="table-description">Description</th>
<th class="table-event-detail">Event Detail</th>
</tr>
</thead>
<tbody>
<tr>
<td data-flavor="html"><code class="nowrap">sl-show</code></td>
<td data-flavor="react"><code class="nowrap">onSlShow</code></td>
<td>Emitted when the alert opens.</td>
<td>-</td>
</tr>
<tr>
<td data-flavor="html"><code class="nowrap">sl-after-show</code></td>
<td data-flavor="react"><code class="nowrap">onSlAfterShow</code></td>
<td>Emitted after the alert opens and all animations are complete.</td>
<td>-</td>
</tr>
<tr>
<td data-flavor="html"><code class="nowrap">sl-hide</code></td>
<td data-flavor="react"><code class="nowrap">onSlHide</code></td>
<td>Emitted when the alert closes.</td>
<td>-</td>
</tr>
<tr>
<td data-flavor="html"><code class="nowrap">sl-after-hide</code></td>
<td data-flavor="react"><code class="nowrap">onSlAfterHide</code></td>
<td>Emitted after the alert closes and all animations are complete.</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<p>
<em>Learn more about <a href="/getting-started/usage#events">events</a>.</em>
</p>
<h2 id="methods" class="anchor-heading">
Methods<a href="#methods" aria-label='Direct link to "Methods"'></a>
</h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-arguments">Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap"><code>show()</code></td>
<td>Shows the alert.</td>
<td>-</td>
</tr>
<tr>
<td class="nowrap"><code>hide()</code></td>
<td>Hides the alert</td>
<td>-</td>
</tr>
<tr>
<td class="nowrap"><code>toast()</code></td>
<td>
Displays the alert as a toast notification. This will move the alert out of its position in the DOM
and, when dismissed, it will be removed from the DOM completely. By storing a reference to the
alert, you can reuse it by calling this method again. The returned promise will resolve after the
alert is hidden.
</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
<p>
<em>Learn more about <a href="/getting-started/usage#methods">methods</a>.</em>
</p>
<h2 id="parts" class="anchor-heading">Parts<a href="#parts" aria-label='Direct link to "Parts"'></a></h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap"><code>base</code></td>
<td>The component’s base wrapper.</td>
</tr>
<tr>
<td class="nowrap"><code>icon</code></td>
<td>The container that wraps the optional icon.</td>
</tr>
<tr>
<td class="nowrap"><code>message</code></td>
<td>The container that wraps the alert’s main content.</td>
</tr>
<tr>
<td class="nowrap"><code>close-button</code></td>
<td>The close button, an <code>&lt;sl-icon-button&gt;</code>.</td>
</tr>
<tr>
<td class="nowrap"><code>close-button__base</code></td>
<td>The close button’s exported <code>base</code> part.</td>
</tr>
</tbody>
</table>
</div>
<p>
<em>Learn more about <a href="/getting-started/customizing/#css-parts">customizing CSS parts</a>.</em>
</p>
<h2 id="animations" class="anchor-heading">
Animations<a href="#animations" aria-label='Direct link to "Animations"'></a>
</h2>
<div class="table-scroll">
<table>
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nowrap"><code>alert.show</code></td>
<td>The animation to use when showing the alert.</td>
</tr>
<tr>
<td class="nowrap"><code>alert.hide</code></td>
<td>The animation to use when hiding the alert.</td>
</tr>
</tbody>
</table>
</div>
<p>
<em>Learn more about <a href="/getting-started/customizing#animations">customizing animations</a>.</em>
</p>
<h2 id="dependencies" class="anchor-heading">
Dependencies<a href="#dependencies" aria-label='Direct link to "Dependencies"'></a>
</h2>
<p>This component automatically imports the following dependencies.</p>
<ul>
<li><code>&lt;sl-icon&gt;</code></li>
<li><code>&lt;sl-icon-button&gt;</code></li>
</ul>
</div>
</article>
</main>
</body>
</html>
Reference in New Issue Copy Permalink