Banner
A banner shows an important message at the top of the screen.
#Warning
Use a warning banner for something people should act on soon.
import { Banner } from '@wolf-rayet/react';
<Banner>Payment details needed. To start using the service, add a payment method.</Banner>#Error
Use an error banner when the whole product is affected.
import { Banner } from '@wolf-rayet/react';
<Banner appearance="error">The service has a problem right now. Replies may be delayed.</Banner>#Announcement
Use an announcement banner for news that is not urgent.
import { Banner } from '@wolf-rayet/react';
<Banner appearance="announcement">We are making changes to how conversations are routed.</Banner>