Notification action
Examples
Check out the Usage section for details about how to design a NotificationAction properly, and the different configuration options we provide.
Basic example
The NotificationAction component is a panel with a list of notifications that you can choose. The panel itself has a header and footer, and it can appear as a result of some event, or at the click of a button. You can implement the logic for each notification and for the panel itself. You can also add an onClick event or target url to headers and footers to handle any navigation needed.
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
href: '/',
label: 'Footer link',
}}
headerLink={{
label: 'Header link',
}}
id="notification-action"
title="This is a popover">
lorem ipsum dolor sit amet
</NotificationAction>
Text truncation example
If the text in the header, footer or title section is too long, it will truncate its content. It will not truncate the content of notification text.
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
href: '/',
label:
'very long text very long text very long text very long text very long text very long text',
}}
headerLink={{
label:
'very long text very long text very long text very long text very long text very long text',
}}
id="notification-action"
title="very long text very long text very long text very long text very long text very long text">
very long text very long text very long text very long text very long text
</NotificationAction>
OnClick example
The header and footer links can be set to run a function when clicked.
function MakeToast (text: string) {
ToastProvider.toast({
message: text,
autoClose: 3000,
})
}
<ToastProvider />
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
label: 'Footer link',
onClick: () => {MakeToast("Footer clicked")}
}}
headerLink={{
label: 'Header link',
onClick: () => {MakeToast("Header clicked")}
}}
id="notification-action"
title="This is a popover"
>
lorem ipsum dolor sit amet
</NotificationAction>
Was this page helpful?