Global announcement

A compact announcement chip for displaying global notifications in a bottom rail. Use GlobalAnnouncement for simple chip-only announcements, and GlobalAnnouncementPopover when you need to display additional details and actions in a popover.

#In App Example

Global announcements are designed to be displayed in a bottom rail. Hover over an announcement to see its popover, and click "Dismiss" to remove it. Click "Reset" to restore all announcements.

#Dismissing all announcements

This example demonstrates how the bottom rail disappears when all announcements are dismissed, allowing the page body to expand.

#Usage

#GlobalAnnouncement (Chip Only)

Use GlobalAnnouncement for simple chip-only announcements without a popover. The chip includes an X button to dismiss the announcement when onDismiss is provided.

#GlobalAnnouncementPopover (With Popover)

Use GlobalAnnouncementPopover when you need to display additional details and actions in a popover. The dismiss button appears inside the popover, not on the chip.

#Variants

#Simple

Use the simple variant for basic text announcements without a leading icon.

#Info

Use the info variant for promotional or informational announcements.

#Danger

Use the danger variant for critical errors or system-wide issues.

#Warning

Use the warning variant for caution states and usage warnings.

#New Feature

Use the newFeature variant for feature announcements. This variant includes a subtle shimmer animation.

#Actions

#With Primary Action

Add a primary action button to the popover footer. Primary actions are styled with secondary button styling.

#With Secondary Action

Add a secondary action button alongside the primary action. Secondary actions are styled with tertiary button styling.

#With Link

Add a link to the popover footer for external resources like documentation.

#Custom Icon

Override the default variant icon with a custom one.

#States

#Default

The compact chip shows the icon and truncated label text.

#Hover/Focus

On hover or focus, the popover opens above the chip. The popover stays open while hovering either the chip or the popover itself. For GlobalAnnouncement (chip-only), the dismiss X button appears on hover.

#Guidelines

#When to use

• System-wide notifications that apply to all users
• Promotional announcements (conferences, webinars)
• Critical system errors or outages
• Usage warnings and limits
• New feature announcements

#When not to use

• Page-specific alerts (use Alert instead)
• Form validation errors (use FormField with error state)
• Toast notifications for user actions (use Toast instead)
• Inline status messages

#Content

• Keep chip label text concise (truncates after ~300px)
• Popover description should be 3 lines or less
• Use clear, actionable language for buttons
• "View docs" links should open in a new tab

#Props

#GlobalAnnouncement

Simple chip-only announcement component with an inline dismiss button.

Inherits margin props.

Name	Default	Description
variant	"simple"	"simple" | "info" | "danger" | "warning" | "newFeature" Announcement variant determines the color scheme and default icon.
label	—	string Label text shown in the compact chip.
onDismiss	—	(event: MouseEvent | KeyboardEvent) => void Callback when the announcement is dismissed via the X button.
icon	—	ComponentType<SVGAttributes<SVGElement>> Override the default variant icon.

#GlobalAnnouncementPopover

Announcement chip with popover for displaying additional details and actions. The dismiss button is rendered inside the popover.

Inherits margin props.

Name	Default	Description
label	—	string Label text shown in the compact chip.
title	—	string Title shown in the hover popover.
description	—	string Description text shown in the hover popover. Should be 3 lines or less.
onDismiss	—	() => void Callback when the announcement is dismissed. Renders a "Dismiss" button in the popover.
primaryAction	—	{ | label: string; | onClick: () => void; | } Primary action button shown in the popover footer. Rendered with secondary button styling.
secondaryAction	—	{ | label: string; | onClick: () => void; | } Secondary action button shown in the popover footer. Rendered with tertiary button styling.
link	—	{ | label: string; | href: string; | isExternal?: boolean; | } Link shown in the popover footer.
icon	—	ComponentType<SVGAttributes<SVGElement>> Override the default variant icon.
variant	—	"newFeature" | "simple" | "info" | "danger" | "warning" Announcement variant determines the color scheme and default icon.
shimmer	true	boolean Enable animated shimmer effect on the label text. Only available for the "newFeature" variant.

#GlobalAnnouncementAction

Configuration object for action buttons.

• label (string) - Button label text.
• onClick (() => void) - Callback when the button is clicked.

#GlobalAnnouncementLink

Configuration object for links.

• label (string) - Link label text.
• href (string) - Link URL.
• isExternal (boolean) - If true, the link will open in a new tab.