Banner
Banner is a strong visual pattern that is used to display an important information or state which remains until the cause is resolved or the banner is dismissed by the user.
- Banner can include any kind of content, i.e. icons, links, copy
- Banner should be dismissible
- Banner info and success appear at the bottom of the screen (sticky)
- Banner error appears at the top of the screen (sticky)
- Banner appears and disappears via slide in/out animation combined with soft fade and smooth easing
To properly hide the banner with the correct animation, it is recommended to call the dismiss function that can be used when providing a function as the child. This will also unmount the component once the animation is completed.
If you need the banner to be placed top or bottom without depending on the variant make sure to align with the design team and bear in mind that you can use the position prop for it.
Variants
With these buttons, you can trigger a banner to appear on the current page. You can also see some example banner variations with content below.
Info Banner
In order to continuously improve our websites, and show offers and advertisements that are suited to you, we use cookies, tracking and (re-) targeting technologies. Please see our Cookie policy for more information. Tracking and (re-) targeting technologies will only be used if you click on "Agree".
<Banner><Text as="p" fontSize={1} inverted>In order to continuously improve our websites, and show offers and advertisements that are suited to you, we usecookies, tracking and (re-)targeting technologies. Please see our Cookie policy for more information. Trackingand (re-)targeting technologies will only be used if you click on "Agree".</Text></Banner>
Success Banner
Booking radius updated
<Banner variant="success"><Text as="p" textAlign="center" fontWeight="semibold" inverted>Booking radius updated</Text></Banner>
Success Banner with Headline & Text
Booking radius updated
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
<Banner variant="success"><Headline as="h5" mb={1} textAlign="center" inverted>Booking radius updated</Headline><Text as="p" fontSize={1} textAlign="center" inverted>accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsumdolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text></Banner>
Error Banner
Something went wrong :(
<Banner variant="danger"><Text as="p" textAlign="center" fontWeight="semibold" inverted>Something went wrong :(</Text></Banner>
Dismissible Banner
<Banner>{dismiss => (<Button variant="secondary" size="small" inverted onClick={() => dismiss()}>Dismiss</Button>)}</Banner>
API
Name | Type | Default |
---|---|---|
position | "top" | "bottom" Overrides the banner position. | - |
variant | "info" | "success" | "danger" Set the appropriate background color, screen position, and animation. | - |
onClose | () => void A function that will be called after the user has dismissed the banner and the banner has disappeared. | - |
Dismiss
Banner provides a function to dismiss the component with an animation. The
dismiss function is available either through render props or a hook. After the
animation has finished the onClose
callback will be called.
Render Props
<Banner>{dismiss => <Button onClick={dismiss}>Close</Button>}</Banner>
Hook
const InsideBanner = () => {const dismiss = useBannerDismiss();return <button onClick={dismiss}>Close</button>;};const BannerWrapper = () => {return (<Banner><InsideBanner /></Banner>)};