GlobalAlert

A compact alert chip for displaying global notifications in a bottom rail. Use GlobalAlert for simple chip-only alerts, and GlobalAlertPopover when you need to display additional details and actions in a popover.

#In App Example

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

#Dismissing all alerts

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

#Usage

#GlobalAlert (Chip Only)

Use GlobalAlert for simple chip-only alerts without a popover. The chip includes an X button to dismiss the alert when onDismiss is provided.

#GlobalAlertPopover (With Popover)

Use GlobalAlertPopover 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 alerts without a leading icon.

#Info

Use the info variant for promotional or informational alerts.

#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 GlobalAlert (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

#GlobalAlert

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

Inherits margin props.

Name	Default	Description
variant	"simple"	"simple" | "info" | "danger" | "warning" | "newFeature" Alert 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 alert is dismissed via the X button.
icon	—	ComponentType<SVGAttributes<SVGElement>> Override the default variant icon.
shimmer	false (true for "newFeature" variant)	boolean Enable animated shimmer effect on the label text.

#GlobalAlertPopover

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

Inherits margin props.

Name	Default	Description
variant	"simple"	"simple" | "info" | "danger" | "warning" | "newFeature" Alert variant determines the color scheme and default icon.
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 alert is dismissed. Renders a "Dismiss" button in the popover.
primaryAction	—	{ | /** | * Button label text. | */ | label: string; | /** | * Callback when the button is clicked. | */ | onClick: () => void; | } Primary action button shown in the popover footer. Rendered with secondary button styling.
secondaryAction	—	{ | /** | * Button label text. | */ | label: string; | /** | * Callback when the button is clicked. | */ | onClick: () => void; | } Secondary action button shown in the popover footer. Rendered with tertiary button styling.
link	—	{ | /** | * Link label text. | */ | label: string; | /** | * Link URL. | */ | href: string; | /** | * If true, the link will open in a new tab. | */ | isExternal?: boolean; | } Link shown in the popover footer.
icon	—	ComponentType<SVGAttributes<SVGElement>> Override the default variant icon.
shimmer	false (true for "newFeature" variant)	boolean Enable animated shimmer effect on the label text.

#GlobalAlertAction

Configuration object for action buttons.

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

#GlobalAlertLink

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.