Announcement Bar

Dismissable top-of-page notification strip. Supports multiple color variants, icons, and action elements.

Import

import { AnnouncementBar } from "poyraz-ui/organisms";

Default

Dark announcement bar with dismiss button.

<AnnouncementBar>
  🚀 Poyraz UI v1.0 is now available!
</AnnouncementBar>

With Icon & Action

Bar with a leading icon and action button.

<AnnouncementBar
  variant="branded"
  icon={<Sparkles className="h-4 w-4" />}
  action={
    <a href="#" className="underline font-bold text-xs">
      Learn More →
    </a>
  }
>
  New components added this week!
</AnnouncementBar>

Variants

All color variants: default, info, success, warning, danger, branded.

<AnnouncementBar variant="default">Default</AnnouncementBar>
<AnnouncementBar variant="info">Info update</AnnouncementBar>
<AnnouncementBar variant="success">Operation successful!</AnnouncementBar>
<AnnouncementBar variant="warning">Maintenance scheduled</AnnouncementBar>
<AnnouncementBar variant="danger">Critical security update</AnnouncementBar>
<AnnouncementBar variant="branded">Branded announcement</AnnouncementBar>

Non-Dismissible

Bar without a dismiss button.

<AnnouncementBar
  dismissible={false}
  icon={<Megaphone className="h-4 w-4" />}
>
  This bar cannot be dismissed.
</AnnouncementBar>