Notification

A notification is an element used to display brief messages, alerts, or updates to users within a user interface.

Overview

pie-notification is a Web Component built using Lit. It offers a simple and accessible notification component for web applications.

This component can be easily integrated into various frontend frameworks and customised through a set of properties.

Installation

To install pie-notification in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

Prop	Options	Description	Default
variant	`"neutral"` `"neutral-alternative"` `"info"` `"success"` `"warning"` `"error"`	Sets the variant of the notification.	`"neutral"`
position	`"inline-content"` `"full-width"`	Defines the proper styles, whether the component appears within the content or at the top of the interface.	`"inline-content"`
heading		The heading text of the notification.	`undefined`
headingLevel	`h1` `h2` `h3` `h4` `h5` `h6`	The HTML tag to use for the notification's heading.	`h2`
isDismissible	`true` `false`	When true, allows dismissing the notification by clicking on the close button.	`false`
isCompact	`true` `false`	When true, aligns the footer with the header and icons, making the component compact.	`false`
isOpen	`true` `false`	When true, the notification is set to be open and visible.	`true`
hideIcon	`true` `false`	When true, the icon will be hidden.	`false`
hasStackedActions	`true` `false`	When true, action buttons will stack on narrow screens.	`false`
leadingAction	`{ text: string, ariaLabel?: string }`	An object representing the leading action of the notification.	`undefined`
supportingAction	`{ text: string, ariaLabel?: string }`	An object representing the supporting action of the notification. The action will only render if `leadingAction` is passed.	`undefined`
aria	`{ close?: string, label?: string }`	The ARIA labels used for various parts of the notification, only pass label if there is no heading to ensure the region is announced with a title.	`undefined`

Slots

Slot	Description
`default`	The default slot is used to pass text into the notification component.
`icon`	Used to pass in an icon to the notification component.

Events

The table below provides a list of events you can listen for:

Event	Type	Description
`pie-notification-leading-action-click`	`CustomEvent`	Triggered when the user clicks on the leading action.
`pie-notification-supporting-action-click`	`CustomEvent`	Triggered when the user click on the supporting action.
`pie-notification-close`	`CustomEvent`	Triggered when the user close the notification.
`pie-notification-open`	`CustomEvent`	Triggered when the user opens the notification.

Using `pie-icons-webc` with the `pie-notification` icon slot

We recommend using pie-icons-webc when using the icon slot. Here is an example of how you would do this:

<!--
  Note that pie-notification and the icons that you want to use will need to be imported as components into your application.
  See the `pie-icons-webc` README for more info on importing these icons.
-->
<pie-notification>
    <icon-vegan slot="icon"></icon-vegan>
    Label
</pie-notification>

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/notification.js'

<!-- pass js file into <script> tag -->
<pie-notification title="Heading">Content</pie-notification>
<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/notification.js';

<pie-notification title="Heading">Content</pie-notification>

For React Applications:

import { PieNotification } from '@justeattakeaway/pie-webc/react/notification.js';

<PieNotification title="Heading">Content</PieNotification>