@nice-digital/nds-alert

Alert component for the NICE Design System

• @nice-digital/nds-alert - Installation - Usage - React - Props - SCSS - HTML

Installation

Install Node, and then:

npm i @nice-digital/nds-alert --save

Usage

React

Import the Alert component from the package and use within JSX:

import React from "react";
import { Alert } from "@nice-digital/nds-alert";

<Alert type="caution">
	<h3>Important Notice</h3> // type defaults to 'info' if not supplied
	<p>Please read the below for more information.</p>
</Alert>;

Props

children

• Type: ReactNode (required)

The body content of the alert. Can receive any markup.

<Alert>
	<p>Here is some addition content.</p>
</Alert>

type

• Type: string

The styling to apply to the alert box. Defaults to info if not supplied. Can be one of info, success, caution and error

<Alert type="success">
	<p>Thank you for your submission.</p>
</Alert>

SCSS

If you're not using React, then import the SCSS directly into your application by:

@forward '@nice-digital/nds-alert/scss/alert';

HTML

If you're not using React, then include the SCSS as above and use the HTML:

<div class="alert alert--info">
	<h3>Alert title</h3>
	<p>
		Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet inventore
		maxime repellendus dolorem incidunt tempora a aspernatur sapiente quas
		quidem quia dolores, molestiae, accusamus, libero dicta! Explicabo
		recusandae, exercitationem iure ad asperiores tenetur quaerat, animi in quae
		numquam velit nostrum!
	</p>
</div>