Inline notification

The <InlineNotification> component is used to communicate important information to a user. For accessibility reasons, <InlineNotification> content cannot include interactive elements, just text.

Example

Info

Lorem ipsum: dolor sit amet elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.

Error

Error: dolor sit amet elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.

Success

Success: dolor sit amet elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.

Warning

Warning: dolor sit amet, elit. Curabitur ac odio arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit non vel quam.

Code

components/InlineNotification/InlineNotification.js
// Info

<InlineNotification>

**Lorem ipsum:** dolor sit amet, elit. Curabitur ac odio
arcu. Vestibulum egestas eleifend porttitor. Quisque malesuada pulvinar
pellentesque. Nunc dictum odio eu enim venenatis fringilla. Nunc finibus enim
dui, a tempus quam commodo vitae. Donec non eros gravida dolor porta suscipit
non vel quam.

Props

property	propType	required	default	description
children	node			Pass in the children that will be rendered within the notification
className	string			Specify an optional className to be applied to the container node
kind	string	yes	`info`	`error`, `info`, `success`, `warning`

Edit this page on GitHub

Components: ImageGallery

Components: Markdown