Notification

Display global messages as feedback in response to user operations.

  • To provide feedback such as success, warning, error etc.
  • A message is displayed at top and center and will be dismissed automatically, as a non-interrupting light-weighted prompt.

Install

import {Notification} from '@xsolla/uikit';

Examples

Default appearance
Success
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit et tempore quidem maiores? Doloribus, fugit!
Warning
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit et tempore quidem maiores? Doloribus, fugit!
Error
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit et tempore quidem maiores? Doloribus, fugit!
Info
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit et tempore quidem maiores? Doloribus, fugit!
Float Default appearance
Payment method is activated
Lorem ipsum dolor sit amet.
Simple appearance
A newer version of the API is available. Learn more
Minimal appearance
A newer version of the API is available. Learn more
String appearance
Please enter correct E-Mail address

Usage

<Notification title="Continue configuration" status="warning">
  Continue configuration of packages to start this module. <a href="#">Learn more.</a>
</Notification>
<Notification
  title={
    <Fragment>
      A newer version of the API is available. <a href="#">Learn more</a>
    </Fragment>
  }
  status="warning"
  size="sm"
/>

API

PropertyDescriptionTypeDefault
appearancedefault, simple, minimal, stringstringdefault
statuserror, success, warning, infostring
childrenmessage textReact$Node
titletitle textReact$Node
sizecan be set to xs, sm, mdstringdepends on appearance
iconapplies only to notifications with size md and upbooleanfalse
floatusage as a popup notificationbooleanfalse
fullWidthdisables notification's max widthbooleanfalse
onCloseclose handler, only works in float = truebooleanfalse
dataIdattribute for data identifierstring