Marketing component

Announcement Bar

Publish a responsive notice with badge, icon, supporting copy, action, dismiss behavior, and width controls.

19 props0 slots1 outputsTheme readyResponsive

Interactive playground

Configure Announcement Bar

Change any prop and inspect the server-rendered component immediately.

Live preview

Component code

<AnnouncementBar
  description="A polished default announcement bar for a modern application."
  actionLabel="Announcement Bar"
  actionHref="#announcement-bar-demo"
  dismissible="true"
  dismissLabel="Announcement Bar"
/>

Event outputInteract with the preview to inspect the typed payload.

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Soft product notice

Use a calm, dismissible notice inside a constrained content area.

Live preview

Public notice

All composite components are now available

Review each component and its recommended use cases.

View components

Component usage.wrn

<AnnouncementBar
  badge="Public notice"
  badgeIcon="icon-[lucide--sparkles]"
  message="All composite components are now available"
  description="Review each component and its recommended use cases."
  actionLabel="View components"
  actionHref="#components"
  actionIcon="icon-[lucide--arrow-down]"
  dismissible="true"
  dismissLabel="Announcement Bar"
/>

Compact

Wide solid announcement

Use stronger contrast for important platform or service announcements.

Live preview

Component usage.wrn

<AnnouncementBar
  badge="Release"
  message="WRNexusJS UI updates are ready"
  description="Explore the redesigned responsive components."
  icon="icon-[lucide--rocket]"
  actionLabel="Read changes"
  actionHref="#release"
  dismissible="true"
  dismissLabel="Compact example"
  compact="true"
  size="sm"
  width="wide"
  variant="solid"
/>

Advanced

Full-width critical alert

Use edge-to-edge width for time-sensitive information that applies to the complete page.

Live preview

Service alert

Scheduled maintenance tonight

Some services may be temporarily unavailable from 23:00 to 23:30.

View status

Component usage.wrn

<AnnouncementBar
  badge="Service alert"
  message="Scheduled maintenance tonight"
  description="Some services may be temporarily unavailable from 23:00 to 23:30."
  icon="icon-[lucide--triangle-alert]"
  actionLabel="View status"
  actionHref="#status"
  dismissible="true"
  dismissLabel="Advanced example"
  size="lg"
  width="full"
  color="warning"
  variant="solid"
/>

Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@dismissFires after the announcement or feedback surface is dismissed.

Declarative handlers.wrn

<AnnouncementBar
  @dismiss='console.log(payload)'
/>

Direct output handlers.js

import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"AnnouncementBar\"], [data-component=\"AnnouncementBar\"]")

if (component) registerOutputHandler(component, "dismiss", (payload) => {
  console.log("dismiss", payload)
})

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`badge`	string	`""`	No
`badgeIcon`	string	`""`	No
`message`	string	`"Announcement"`	No
`description`	string	`""`	No
`icon`	string	`"icon-[lucide--megaphone]"`	No
`actionLabel`	string	`""`	No
`actionHref`	string	`""`	No
`actionIcon`	string	`""`	No
`dismissible`	boolean	`false`	No
`dismissLabel`	string	`"Dismiss announcement"`	No
`sticky`	boolean	`false`	No
`compact`	boolean	`false`	No
`size`	string	`"default"`	No
`width`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"soft"`	No
`role`	string	`"status"`	No
`live`	string	`"polite"`	No
`class`	string	`""`	No