Notification

Provide contextual feedback messages for typical user actions.

Basic usage

Container width is limited to 350px and longer text is wrapped.

<Notification>Notification</Notification>

<Notification>Notification</Notification>

Types

<WrapperVertical>
  <Notification type="default">Default</Notification>
  <Notification type="primary">Primary</Notification>
  <Notification type="success">Success</Notification>
  <Notification type="warning">Warning</Notification>
  <Notification type="error">Error</Notification>
  <Notification type="info">Info</Notification>
</WrapperVertical>

<WrapperVertical>
  <Notification type="default">Default</Notification>
  <Notification type="primary">Primary</Notification>
  <Notification type="success">Success</Notification>
  <Notification type="warning">Warning</Notification>
  <Notification type="error">Error</Notification>
  <Notification type="info">Info</Notification>
</WrapperVertical>

Other props

Notification with description text

<Notification description="Notification description">
  Notification with description text
</Notification>

<Notification description="Notification description">
  Notification with description text
</Notification>

Notification with MoreLink

Add any Link componet for action or redirection

<Notification
  MoreLink={
    <Link href="#" target="_blank">
      Více
    </Link>
  }
>
  Notification with MoreLink
</Notification>

<Notification
  MoreLink={
    <Link href="#" target="_blank">
      Více
    </Link>
  }
>
  Notification with MoreLink
</Notification>

Notification

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic usage

Types

Other props

Notification with description text

Notification with MoreLink

Basic usage