Full-width page-level feedback banners inspired by Atlassian Design System Banner, Bootstrap Alerts, and GitHub's site-wide announcement banners.
These components occupy the full width of their container and are used for system-wide messages, marketing announcements, and consent requirements.
Sub-components
| Component | Purpose |
|---|---|
banner/1 | Full-width dismissible feedback strip (top/inline) |
announcement_bar/1 | Slim sticky marketing/system announcement at the very top |
cookie_consent/1 | GDPR-compliant cookie consent panel (bottom of viewport) |
Banner (full-width inline feedback)
<.banner variant={:warning} :if={@maintenance_mode}>
<:icon><.icon name="triangle-alert" class="h-4 w-4" /></:icon>
Scheduled maintenance on Saturday 2–4 AM UTC.
<:action href="/status">View status</:action>
</.banner>Announcement bar (sticky top)
<.announcement_bar>
🎉 PhiaUI 1.0 is out! Read the
<:link href="/blog/v1">release notes</:link>.
</.announcement_bar>Cookie consent (bottom overlay)
<.cookie_consent :if={!@cookies_accepted}>
We use cookies to improve your experience.
<:action phx-click="accept_cookies">Accept all</:action>
<:secondary phx-click="open_cookie_settings">Settings</:secondary>
</.cookie_consent>Summary
Functions
Renders a slim sticky announcement bar at the top of the page.
Renders a full-width, optionally dismissible feedback banner.
Renders a GDPR-compliant cookie consent panel at the bottom of the viewport.
Functions
Renders a slim sticky announcement bar at the top of the page.
Used for high-priority marketing or system announcements (new releases, feature announcements, system notices). Typically placed above the navigation header in the root layout.
Example
<.announcement_bar id="release-bar">
PhiaUI 1.0 is here!
<:link href="/changelog">See what's new</:link>
</.announcement_bar>Attributes
id(:string) - Optional ID — required for JS.hide dismiss. Defaults tonil.dismissable(:boolean) - Whentrue, renders a close button. Defaults totrue.class(:string) - Additional CSS classes. Defaults tonil.- Global attributes are accepted. HTML attrs forwarded to the root
<div>.
Slots
inner_block(required) - Announcement text. Can include inline HTML elements.link- Inline link rendered inside the text — rendered as an<a>tag.
Renders a full-width, optionally dismissible feedback banner.
Use for page-level alerts that need more visual prominence than an Alert
component but should not block the user like a modal would. Common uses:
maintenance windows, rate limit warnings, subscription expiry notices.
Example
<.banner id="trial-banner" variant={:warning}>
<:icon><.icon name="clock" class="h-4 w-4" /></:icon>
Your trial expires in 3 days.
<:action phx-click="open_billing">Upgrade now</:action>
</.banner>Attributes
id(:string) - Optional ID — required for JS.hide dismiss. Defaults tonil.variant(:atom) - Visual style controlling background, border and icon defaults. Defaults to:default. Must be one of:default,:info,:success,:warning, or:destructive.closeable(:boolean) - Whentrue, renders an × dismiss button usingJS.hide. Defaults totrue.class(:string) - Additional CSS classes. Defaults tonil.- Global attributes are accepted. HTML attrs forwarded to the root
<div>.
Slots
icon- Optional leading icon (recommended:h-4 w-4).inner_block(required) - Banner message text.action- Primary action — rendered as a link/button on the right.
Renders a GDPR-compliant cookie consent panel at the bottom of the viewport.
The panel is fixed to the bottom of the screen, full-width on mobile and
card-style on desktop. Use the :action slot for the primary accept button
and the :secondary slot for a settings or reject link.
Control visibility server-side via a LiveView assign — hide by setting
:if={!@cookies_accepted}.
Example
<.cookie_consent id="cookie-bar" :if={!@cookies_accepted}>
We use cookies to provide a better experience and analyze traffic.
<a href="/privacy" class="underline">Privacy policy</a>.
<:action phx-click="accept_all_cookies">Accept all</:action>
<:secondary phx-click="cookie_settings">Manage preferences</:secondary>
</.cookie_consent>Attributes
id(:string) - Unique ID for the consent panel. Defaults to"phia-cookie-consent".title(:string) - Heading text for the consent panel. Defaults to"Cookie preferences".class(:string) - Additional CSS classes. Defaults tonil.- Global attributes are accepted. HTML attrs forwarded to the root
<div>.
Slots
inner_block(required) - Privacy description text.action(required) - Primary accept button — wire withphx-clickto set consent state.secondary- Secondary button for granular settings — optional.