Banner
Banners are notifications alerting an event that requires a user action. They are similar toasts except banners are not sparked by the user’s action, therefore they require a different design. Banners are primarily used for global messages about the system that can be simply informational (blue) or color coded to signal success (green), warning (yellow) and error (red).
Read more about when and how to use the Banner component on the internal wiki.
Getting started
yarn add @hig/banner
Import the component and CSS
import Banner from '@hig/banner';
import '@hig/banner/build/index.css';
Basic usage
<Banner type="primary">
Make sure you know these changes will effect your project status
</Banner>
With actions
<Banner
type="primary"
actions={({ isWrappingActions }) => (
<Banner.Interactions isWrappingActions={isWrappingActions}>
<Banner.Action>
<Button
type="secondary"
size="small"
width={isWrappingActions ? "grow" : "shrink"}
title={text(
"Resolve text",
t(languages, chosenLanguage, "BANNER_RESOLVE_BUTTON_TEXT")
)}
/>
</Banner.Action>
<Banner.Action>
<Button
type="secondary"
size="small"
width={isWrappingActions ? "grow" : "shrink"}
title={text(
"Reject text",
t(languages, chosenLanguage, "BANNER_REJECT_BUTTON_TEXT")
)}
/>
</Banner.Action>
</Banner.Interactions>
)}
>
Make sure you know these changes will effect your project status
</Banner>