Component

Banner

Prominent message banner for announcements and alerts.

tsx

import { Banner, AnnouncementBanner } from 'wss3-forge'

Usage

•

Use for important announcements

•

AnnouncementBanner for top-of-page alerts

•

Supports dismissible state

•

Types: info, success, warning, error

Information

This is an informational message for your users.

Success

Your operation completed successfully.

Warning

Please review your settings before continuing.

Examples

Banner Variants

Information

This is an informational message.

Success

Your changes have been saved.

Warning

Please review your settings.

Error

Something went wrong.

tsx

1<VStack gap="md">
2  <Banner variant="info" title="Information">
3    This is an informational message.
4  </Banner>
5  <Banner variant="success" title="Success">
6    Your changes have been saved.
7  </Banner>
8  <Banner variant="warning" title="Warning">
9    Please review your settings.
10  </Banner>
11  <Banner variant="error" title="Error">
12    Something went wrong.
13  </Banner>
14</VStack>

With Action

New feature available

We've added new customization options.

tsx

1<Banner
2  variant="brand"
3  title="New feature available"
4  action={{ label: 'Learn more', onClick: () => {} }}
5>
6  We've added new customization options.
7</Banner>

Dismissible

This banner can be dismissed by clicking the X button.

tsx

1<Banner variant="info" dismissible>
2  This banner can be dismissed by clicking the X button.
3</Banner>

Announcement Banner

tsx

1<AnnouncementBanner href="#">
2  🎉 Version 2.0 is here! Check out the new features.
3</AnnouncementBanner>

TreeView

Notification

Last updated: December 2025