@bdt-component-library/banner

Banner component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryBanner from 'https://cdn.skypack.dev/@bdt-component-library/banner';
</script>

README

Banner Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of banners according to style guide conventions.

API

prop type required default explanation
children React node yes n/a The component/text to render inside the button
className string no "" Adds an optional classname to the component
id string no "" Adds an optional id to the component
variant enum("success", "error", "informational", "warning") no "error" Changes icon and color style for chosen variant
alertMessage string no no Message to display in the banner
isDismissable boolean no false Determines whether or not the banner can be dismissed
isFixed boolean no false Uses fixed positioning (necessary for positioning if not using with a container)
autoDismiss number no 0 Dismisses the banner on a timer according to the milliseconds specified
action React component no null Renders a component, intended to be an action on the banner (will apply styles to button internally)
position enum("top", "bottom") no "top" Positions the banner on the page
zIndex number no 1 Determines z-index style for the component