SlimBanner
A flexible banner component for announcements, alerts, or calls to action. Supports custom messages, links, icons, and toggle states.
Basic Example (Ukraine Solidarity)
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"w-full drop-shadow"</span></span>
<span class="line"><span style="color:#B392F0"> client:load</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit"</span></span>
<span class="line"><span style="color:#B392F0"> linkText</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"this page"</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"https://polo.blue/support-ukraine/"</span></span>
<span class="line"><span style="color:#B392F0"> linkTitle</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Support Ukraine"</span></span>
<span class="line"><span style="color:#B392F0"> showIcon</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span></span>
<span class="line"><span style="color:#B392F0"> toggleMessage</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"RUSSIA IS A TERRORIST STATE"</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Simple Announcement
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"🎉 New features are now available!"</span></span>
<span class="line"><span style="color:#B392F0"> linkText</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Learn more"</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/updates"</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span><span style="color:#E1E4E8">={</span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Custom Message with Link
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Limited time offer! Get 50% off all products. "</span></span>
<span class="line"><span style="color:#B392F0"> linkText</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Shop now"</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/shop"</span></span>
<span class="line"><span style="color:#B392F0"> linkTitle</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Visit our shop"</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span><span style="color:#E1E4E8">={</span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
With Toggle State
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Join us at the annual car meet this weekend!"</span></span>
<span class="line"><span style="color:#B392F0"> linkText</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"See the lineup"</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/events"</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span></span>
<span class="line"><span style="color:#B392F0"> toggleMessage</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"🏁 TORQUE IS EVERYTHING"</span></span>
<span class="line"><span style="color:#B392F0"> toggleBgClass</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"bg-red-700"</span></span>
<span class="line"><span style="color:#B392F0"> toggleTextClass</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"text-white"</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Message Only (No Link)
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Scheduled maintenance: The site will be down on Sunday, 3-5 AM EST."</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">""</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span><span style="color:#E1E4E8">={</span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Persistent Banner (LocalStorage)
Close the banner permanently using localStorage. It will stay hidden even after page refresh.
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"🍪 This website uses cookies to enhance your experience."</span></span>
<span class="line"><span style="color:#B392F0"> linkText</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"Learn more"</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"/privacy"</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span></span>
<span class="line"><span style="color:#B392F0"> persistClose</span></span>
<span class="line"><span style="color:#B392F0"> storageKey</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"cookie-banner-closed"</span></span>
<span class="line"><span style="color:#B392F0"> expirationDays</span><span style="color:#E1E4E8">={</span><span style="color:#79B8FF">90</span><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Note: Once you close this banner, it won’t show again for 90 days (or until you clear localStorage).
Persistent with No Expiration
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span></span>
<span class="line"><span style="color:#B392F0"> message</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"📢 Important: This is a one-time announcement."</span></span>
<span class="line"><span style="color:#B392F0"> linkUrl</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">""</span></span>
<span class="line"><span style="color:#B392F0"> showCloseButton</span></span>
<span class="line"><span style="color:#B392F0"> persistClose</span></span>
<span class="line"><span style="color:#B392F0"> storageKey</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"announcement-dismissed"</span></span>
<span class="line"><span style="color:#B392F0"> expirationDays</span><span style="color:#E1E4E8">={</span><span style="color:#79B8FF">0</span><span style="color:#E1E4E8">}</span></span>
<span class="line"><span style="color:#E1E4E8">/></span></span></code></pre>
Tip: Set expirationDays={0} to hide the banner forever once closed.
Props
|
message | string | Ukraine message | Main banner message text |
linkText | string | 'this page' | Text for the link |
linkUrl | string | Ukraine URL | URL for the link (set to empty string for no link) |
linkTitle | string | '' | Title attribute for the link |
toggleMessage | string | '' | Message to show when close button is clicked (enables toggle) |
toggleBgClass | string | 'bg-black' | Background class for toggle state |
toggleTextClass | string | 'text-white' | Text color class for toggle state |
showCloseButton | boolean | true | Show close/toggle button |
closeButtonAriaLabel | string | 'Toggle' | Aria label for close button |
showIcon | boolean | false | Show icon (Ukraine flag by default) |
iconClass | string | Ukraine flag CSS | Custom CSS class for icon |
persistClose | boolean | false | Save close state to localStorage |
storageKey | string | 'slimbanner-closed' | localStorage key for persistence |
expirationDays | number | 30 | Days until localStorage expires (0 = never) |
Slots
| Slot |
Description |
default |
Override the entire message content |
icon |
Override the icon/flag |
toggle |
Override the toggle state content |
Using Slots
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="astro"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">SlimBanner</span><span style="color:#B392F0"> client:load</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">strong</span><span style="color:#B392F0"> slot</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"default"</span><span style="color:#E1E4E8">>Custom content</</span><span style="color:#85E89D">strong</span><span style="color:#E1E4E8">> with <</span><span style="color:#85E89D">em</span><span style="color:#E1E4E8">>HTML markup</</span><span style="color:#85E89D">em</span><span style="color:#E1E4E8">></span></span>
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#79B8FF">SlimBanner</span><span style="color:#E1E4E8">></span></span></code></pre>
LocalStorage Management
When using persistClose={true}, the close state is saved to localStorage. Here’s how to manage it:
Clear specific banner:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="javascript"><code><span class="line"><span style="color:#E1E4E8">localStorage.</span><span style="color:#B392F0">removeItem</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'cookie-banner-closed'</span><span style="color:#E1E4E8">);</span></span></code></pre>
Clear all banners:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="javascript"><code><span class="line"><span style="color:#6A737D">// If using default key</span></span>
<span class="line"><span style="color:#E1E4E8">localStorage.</span><span style="color:#B392F0">removeItem</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'slimbanner-closed'</span><span style="color:#E1E4E8">);</span></span>
<span class="line"></span>
<span class="line"><span style="color:#6A737D">// Or clear all by pattern</span></span>
<span class="line"><span style="color:#E1E4E8">Object.</span><span style="color:#B392F0">keys</span><span style="color:#E1E4E8">(localStorage)</span></span>
<span class="line"><span style="color:#E1E4E8"> .</span><span style="color:#B392F0">filter</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">key</span><span style="color:#F97583"> =></span><span style="color:#E1E4E8"> key.</span><span style="color:#B392F0">includes</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'banner'</span><span style="color:#E1E4E8">))</span></span>
<span class="line"><span style="color:#E1E4E8"> .</span><span style="color:#B392F0">forEach</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">key</span><span style="color:#F97583"> =></span><span style="color:#E1E4E8"> localStorage.</span><span style="color:#B392F0">removeItem</span><span style="color:#E1E4E8">(key));</span></span></code></pre>
Check if banner is closed:
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="javascript"><code><span class="line"><span style="color:#F97583">const</span><span style="color:#79B8FF"> data</span><span style="color:#F97583"> =</span><span style="color:#79B8FF"> JSON</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">parse</span><span style="color:#E1E4E8">(localStorage.</span><span style="color:#B392F0">getItem</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'cookie-banner-closed'</span><span style="color:#E1E4E8">));</span></span>
<span class="line"><span style="color:#E1E4E8">console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'Banner closed:'</span><span style="color:#E1E4E8">, data?.closed);</span></span>
<span class="line"><span style="color:#E1E4E8">console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'Expires at:'</span><span style="color:#E1E4E8">, </span><span style="color:#F97583">new</span><span style="color:#B392F0"> Date</span><span style="color:#E1E4E8">(data?.expires));</span></span></code></pre>
uno.config.ts / shortcuts
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8">[</span><span style="color:#9ECBFF">'slimbanner'</span><span style="color:#E1E4E8">,</span><span style="color:#9ECBFF">'px-4 sm:px-8 flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100 z-2 px-4 py-3 sm:text-base sm:px-8 text-blue-darker print-hidden'</span><span style="color:#E1E4E8">],</span></span></code></pre>