Banner

Quick start

Here's a quick start guide to get started with the Banner component

Importing Component

import { Banner } from "@hover-design/react";

Code Snippets and Examples

Banner Info (Default)

<div className="App">
  <Banner title="Info Banner" />
</div>

Info Banner

Banner Success

<div className="App">
  <Banner title="Bruce Banner" type="success" />
</div>

Bruce Banner

Banner Warning

<div className="App">
  <Banner title="Warning" type="warning" />
</div>

Warning

Banner Danger

<div className="App">
  <Banner title="Danger" type="danger" />
</div>

Danger

Banner With Icons

<div className="App">
  <Banner title="Banner with icons" showIcon />
</div>

Banner with icons

Note: Each Banner type has a default icon associated with it.

Banner With Description

<div className="App">
  <Banner title="Banner with Description" type="warning" showIcon>
    This is a Banner Description
  </Banner>
</div>

Banner with Description

This is a Banner Description

Banner with CTA Button

<div className="App">
  <Banner
    title="Banner has CTA"
    showCtaButton
    ctaAction={() => {
      window.alert("Banner Clicked!");
    }}
  />
</div>

Banner has CTA

Banner Alignment

<div className="App">
  <Banner title="Center Aligned Banner" alignment="center" />
</div>

Center Aligned Banner

Banner Variant - Filled

<div className="App">
  <Banner title="Filled Banner" variant="filled">
    This is a Filled Banner
  </Banner>
</div>

Filled Banner

This is a Filled Banner

Banner Variant - Outline

<div className="App">
  <Banner title="Outline Banner" variant="outline">
    This is an Outline Banner
  </Banner>
</div>

Outline Banner

This is an Outline Banner

Banner - Custom Colors

<Banner title="Custom Colors" color="hotpink" backgroundColor="lavenderblush">
  This is a Custom Banner
</Banner>

Custom Colors

This is a Custom Banner

Props Reference

Attributes	Values	Default Value	Optional ?
variant	light | filled | outline	light	Yes
type	info | success | warning| danger	info	Yes
title	ReactNode		Yes
icon	ReactNode		Yes
color	string		Yes
borderRadius	string	4px	Yes
backgroundColor	string		Yes
alignment	left | center | right	left	Yes
showCtaButton	boolean	false	Yes
ctaIcon	ReactNode		Yes
ctaAction	()=>void		Yes

Custom Styles

Note: It is advised to use these classNames scoped inside of the className given as prop to the main component.

ClassName	Element
hover-banner-alert	Alert Component Used in this component
hover-banner-cta-icon	CTA Icon container
hover-alert-title	Title container
hover-alert-description	Description Container
hover-alert-icon	Icon Container