All tones
System update scheduled for tonight.
Your trial has been extended.
Your subscription expires soon.
Unable to connect to the server.
Welcome to the new dashboard.
import { Banner } from '@mihcm/ui/Banner';
<div className="space-y-2">
<Banner tone="info">System update scheduled for tonight.</Banner>
<Banner tone="accent">Your trial has been extended.</Banner>
<Banner tone="warning">Your subscription expires soon.</Banner>
<Banner tone="error">Unable to connect to the server.</Banner>
<Banner tone="announcement">Welcome to the new dashboard.</Banner>
</div>Dismissible banner
Click the X to dismiss this banner.
import { Banner } from '@mihcm/ui/Banner';
<Banner tone="info" onDismiss={() => {}}>
Click the X to dismiss this banner.
</Banner>Without icon
A simple text-only announcement.
import { Banner } from '@mihcm/ui/Banner';
<Banner tone="announcement" showIcon={false}>
A simple text-only announcement.
</Banner>