Banners

Full-width notification bars for announcements, system status, and promotional messages.

Variants

A new version of the SDK is available with improved streaming performance.

Your API key has been verified and is ready to use.

Your free tier usage is approaching the monthly limit.

Service disruption detected. Some real-time features may be unavailable.

Scheduled maintenance is planned for this weekend.

Dismissible

You can dismiss this informational banner by clicking the close button.

This neutral banner can also be dismissed when no longer needed.

With Action

Composite Voice now supports Groq and AssemblyAI providers.

Your current plan does not include priority support.

Combined

Version 2.0 introduces breaking changes. Review the migration guide before upgrading.

Custom Icon

The icon prop can override the default variant icon. Pass any React node to replace the built-in icon for a given variant.

Sticky Behavior

The sticky prop makes the banner stick to the viewport top with position: sticky. This is useful for persistent announcements or system status messages that should remain visible as the user scrolls. The sticky behavior is not demonstrated here to avoid interfering with the design system page layout.

ARIA Roles

Banners use appropriate ARIA roles based on their variant. The danger and warning variants use role="alert" for assertive announcements that immediately convey urgent information to assistive technologies. The info, success, and neutral variants use role="status" for polite announcements that do not interrupt the user. Dismissible banners announce their removal to screen readers when closed.