/

<Notification> Component

Notification component to be used within our Toaster component.

Share
Code Editor


<Notification

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  cta={{

    title: 'Standalone link',

    url: '/'

  }}

  onDismiss={() => {}}

/>
NameDescription
appearance
string
Render on light or dark background.
Options: "light", "dark"
description*
string
The text that appears within the notification.
cta*
object
Object contains nested props, see below:
cta.title*
string
The text used within the link.
cta.url*
string
The url used within the link.
onDismiss*
function
A function called when the close button is clicked.

With language

Share
Code Editor


<NotificationWithLanguage

  language="en"

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  cta={{

    title: 'Standalone link',

    url: '/'

  }}

  onDismiss={() => {}}

/>

With product

Share
Code Editor


<NotificationWithProduct

  product="vault"

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  cta={{

    title: 'Standalone link',

    url: '/'

  }}

  onDismiss={() => {}}

/>

With resource

Share
Code Editor


<NotificationWithResource

  type="webinar"

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  cta={{

    title: 'Standalone link',

    url: '/'

  }}

  onDismiss={() => {}}

/>

With thumbnail

Share
Code Editor


<NotificationWithThumbnail

  thumbnail={{

    src: 'https://www.datocms-assets.com/2885/1651495958-infrastructure.png',

    alt: 'HashiCorp Infrastructure'

  }}

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  cta={{

    title: 'Standalone link',

    url: '/'

  }}

  onDismiss={() => {}}

/>

With actions

Share
Code Editor


<NotificationWithActions

  heading="Notification heading"

  description="lAliquet in lacus, scelerisque tristique purus. Lob ortis felis orci lacus egestas et turpis."

  actions={[

    {

      title: 'Primary action',

      onClick: () => {}

    },

    {

      title: 'Secondary action',

      onClick: () => {}

    },

  ]}

  onDismiss={() => {}}

/>