@berlitz/alert-banner

AlertBanner component for the Max Design System

Usage no npm install needed!

<script type="module">
  import berlitzAlertBanner from 'https://cdn.skypack.dev/@berlitz/alert-banner';
</script>

README

Alert Banner npm version

Display a banner fixed at the bottom of the page, containing content and a button.

Installation

yarn add @berlitz/alert-banner

Props

Argument Type Required Default Example
content string true null I have read and agree to the <a href='#'>Privacy Policy</a>
buttonText string true null I Agree
handleButtonClick func true null () => setBannerDismissed(true)

Usage

import React, { setState } from 'react'
import ComponentName from '@berlitz/alert-banner'

const MyApp = () => {
  const [bannerDismissed, setBannerDismissed] = setState(false)

  return (
    <>
      {!bannerDismissed && (
        <AlertBanner
          content="I have read and agree to the <a href='#'>Privacy Policy</a>"
          buttonText="I Agree"
          onClick={() => setBannerDismissed(true)}
        />
      )}
    </>
  )
}

When to use this component

  • Privacy policy banner
  • Displaying a persistent, message to the user