Alert

Quick start

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

Importing Component

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

Code Snippets and Examples

Alert Info

<div className="App">
  <Alert title="Info">This is an Info Alert</Alert>
</div>

Info

This is an Info Alert

Alert Success

<div className="App">
  <Alert title="Success" type="success">
    This is a Success Alert
  </Alert>
</div>

Success

This is a Success Alert

Alert Warning

<div className="App">
  <Alert title="Warning" type="warning">
    This is a Warning Alert
  </Alert>
</div>

Warning

This is a Warning Alert

Alert Danger

<div className="App">
  <Alert title="Danger" type="danger">
    This is a Danger Alert
  </Alert>
</div>

Danger

This is a Danger Alert

Alert Variant - Filled

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

Filled Alert

This is a Filled Alert

Alert Variant - Outline

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

Outline Alert

This is an Outline Alert

Alert - Custom Colors

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

Custom Colors

This is an Customized Alert

Alert - with Close Button

<div className="App">
  <Alert title="Close Button" withCloseButton>
    This alert has a Close Button
  </Alert>
</div>

Note: Clicking on the close button triggers the onClose function which should be passed as a prop to the component

Close Button

This alert has a Close Button

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
closeButtonLabel	aria-label for close button: string		Yes
withCloseButton	boolean	false	Yes
onClose	is triggered when the close button is clicked ()=>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-alert-title	Title container
hover-alert-description	Description Container
hover-alert-closeButtonIcon	Close Button Icon Container
hover-alert-icon	Icon Container