@nice-digital/nds-alert
TypeScript icon, indicating that this package has built-in type declarations

4.0.8 • Public • Published

@nice-digital/nds-alert

Alert component for the NICE Design System

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>

Readme

Keywords

Package Sidebar

Install

npm i @nice-digital/nds-alert

Weekly Downloads

68

Version

4.0.8

License

MIT

Unpacked Size

6.62 kB

Total Files

6

Last publish

Collaborators

  • wongcheming
  • johndavey72
  • barkertron
  • martingallagher1980
  • ditprogrammatic
  • ediblecode
  • josealmeida
  • mark-nice
  • nansenst
  • colin.mazurkiewicz
  • imranazad
  • eleanormollett