core component

AnnouncementBar

Reusable announcement bar component.

@wrnexus/ui 0.2.647 props0 slots1 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<AnnouncementBar badge="New" message="WRNexusJS Organizations is now available." description="Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO." href="/organizations" actionLabel="Explore organizations" />

Legacy mount name: data-component="AnnouncementBar".

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`badge`	`string`	Optional	`"New"`
`message`	`string`	Optional	`"WRNexusJS Organizations is now available."`
`description`	`string`	Optional	`"Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."`
`href`	`string`	Optional	`"/organizations"`
`actionLabel`	`string`	Optional	`"Explore organizations"`
`ariaLabel`	`string`	Optional	`"Announcement"`

Slots

This component does not declare a slot.

Events

click

Source contract

Installed source: components/AnnouncementBar.wrn

component AnnouncementBar {
    props {
        class = ""
        badge = "New"
        message = "WRNexusJS Organizations is now available."
        description = "Build secure multi-tenant applications with teams, roles, domains, and enterprise SSO."
        href = "/organizations"
        actionLabel = "Explore organizations"
        ariaLabel = "Announcement"
    }

    state visible = true

    view {
        <aside
            role="region"
            aria-label="{ariaLabel}"
            class="relative z-[70] overflow-hidden border-b border-indigo-200 bg-indigo-50 text-slate-900 dark:border-indigo-500/20 dark:bg-indigo-500/10 dark:text-white {class}"
            class:hidden="!visible"
        >
            <!-- Decorative background -->
            <div
                aria-hidden="true"
                class="pointer-events-none absolute inset-0 overflow-hidden"
            >
                <div class="absolute -left-20 -top-24 h-40 w-40 rounded-full bg-indigo-300/30 blur-3xl dark:bg-indigo-500/10"></div>

                <div class="absolute -right-20 -bottom-24 h-40 w-40 rounded-full bg-violet-300/30 blur-3xl dark:bg-violet-500/10"></div>
            </div>

            <div
                class="relative flex min-h-11 w-full items-center justify-between gap-4 px-4 py-2.5 sm:px-6 lg:px-10 xl:px-12"
            >
                <div class="flex min-w-0 flex-1 items-center justify-center gap-3">
                    <!-- Badge -->
                    <span
                        class="hidden shrink-0 items-center gap-1.5 rounded-full bg-indigo-600 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.12em] text-white shadow-sm sm:inline-flex"
                    >
                        <span class="icon-[lucide--sparkles] h-3 w-3" aria-hidden="true" ></span>

                        {badge}
                    </span>

                    <!-- Message -->
                    <p
                        class="min-w-0 text-center text-xs font-medium leading-5 text-slate-700 dark:text-slate-300 sm:text-sm"
                    >
                        <span class="font-semibold text-slate-950 dark:text-white">
                            {message}
                        </span>

                        <span class="hidden md:inline">
                            {description}
                        </span>
                    </p>

                    <!-- CTA -->
                    <a
                        href="{href}"
                        class="group hidden shrink-0 items-center gap-1.5 text-xs font-bold text-indigo-700 transition hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-200 sm:inline-flex"
                    >
                        {actionLabel}

                        <span class="icon-[lucide--arrow-right] h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" aria-hidden="true" ></span>
                    </a>
                </div>

                <!-- Mobile CTA -->
                <a
                    href="{href}"
                    aria-label="{actionLabel}"
                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg bg-indigo-100 text-indigo-700 transition hover:bg-indigo-200 dark:bg-indigo-500/15 dark:text-indigo-300 dark:hover:bg-indigo-500/25 sm:hidden"
                >
                    <span class="icon-[lucide--arrow-up-right] h-4 w-4" aria-hidden="true" ></span>
                </a>

                <!-- Close -->
                <button
                    type="button"
                    @click="visible = false"
                    aria-label="Dismiss announcement"
                    class="grid h-8 w-8 shrink-0 place-items-center rounded-lg text-slate-500 transition hover:bg-indigo-100 hover:text-slate-950 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white"
                >
                    <span class="icon-[lucide--x] h-4 w-4" aria-hidden="true" ></span>
                </button>
            </div>
        </aside>
    }
}