Notifications

UI element that displays notifications and related user actions.

Published Last updated: 5.1.0 Change log Github NPM
Twig Usage
{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Notifications (notifications.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outermost container.

object
header
object
    • switch_button

      Render a switch button. Usually to toggle viewing read/unread notifications.

    • actions

      Render action buttons.

    • content

      Render custom content for the header. This prop overrides switch_button and actions.

footer
object
    • content

      Render content for the footer.

Notifications Header Action (notifications-header-action.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outermost container.

object
icon

Render an icon for the action. Icon element set to medium size is expected here.

any
label

Render a text label for the action.

any
Notifications List (notifications-list.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outermost container.

object
content

Render either heading dividers and/or list items.

any
Notifications List Item (notifications-list-item.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outermost container.

object
signifier

Render an icon as a signifier for the notification.

any
site_name

Set the site name that the notification belongs to.

any
timestamp

Set the timestamp of the notification.

any
message
object
    • attributes

      A Drupal attributes object. Applies extra HTML attributes to the message container.

    • content

      Render content of the notification. Use HTML element to emphasize certain words.

read
boolean false
Notifications List Heading Divider (notifications-list-heading-divider.twig)
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the outermost container.

object
content

Render the text label of the heading.

any
Install Install
npm install @bolt/components-notifications
Dependencies @bolt/core-v3.x