notifications docs

Notifications

UI element that displays notifications and related user actions.

Published Last updated: 5.5.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

notifications

Basic Notifications Notifications component is for displaying site-wide user notifications, either via a notifications popover or listing page. Important Notes: Each notification message can be set to read or unread. Each notification message can be plain text, semantic link, or semantic button: passing href attribute to message.attributes will create a semantic link; passing type attribute to message.attributes will create a semantic button. Certain words in a notification message can be emphasized using the <em> HTML element. Emphasized text visually looks like a text link. Header usually contains a switch button and couple action buttons, but all can be overriden by using the header.content prop. Demo
Notification settings
Twig
{% set icon_check_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'check-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_announce %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-announce',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_calendar %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'calendar',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_certification %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'certification',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_info_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'info-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_thumbs_up %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-thumbs-up',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_reply %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'reply',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_heart %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'heart',
    size: 'medium',
  } only %}
{% endset %}
{% set header_switch_button %}
  {% include '@bolt-components-switch-button/switch-button.twig' with {
    label: 'Only show unread notifications',
    attributes: {
      class: 'js-target-the-switch-button-container'
    },
  } only %}
{% endset %}
{% set header_actions %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_check_circle,
    label: 'Mark all as read',
    attributes: {
      type: 'button',
    },
  } only %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_pega_setting,
    label: 'Notification settings',
    attributes: {
      href: '#!',
    },
  } only %}
{% endset %}
{% set content %}
  {% set list_content %}
    {% include '@bolt-components-notifications/notifications-list-heading-divider.twig' with {
      content: 'Latest',
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Community',
      timestamp: '5 min ago',
      message: {
        content: 'This is an <em>unread notification</em>.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Collaboration Center',
      timestamp: '10 min ago',
      message: {
        content: 'This is a <em>read notification</em>.',
        attributes: {
          href: '#!',
        },
      },
      read: true,
    } only %}
    {% include '@bolt-components-notifications/notifications-list-heading-divider.twig' with {
      content: 'Recent',
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Docs',
      timestamp: '1 day ago',
      message: {
        content: 'You can make a plain notification without any actions by not passing any message attributes.',
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Academy',
      timestamp: '1 day ago',
      message: {
        content: 'You can create a notification that <em>performs a function</em> by passing <code>type="button"</code> attribute via message attributes.',
        attributes: {
          type: 'button',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Portal',
      timestamp: '2 days ago',
      message: {
        content: 'You can create a <em>linked notification</em> by passing <code>href</code> attribute via message attributes.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_announce,
      site_name: 'Saleshub',
      timestamp: '2 days ago',
      message: {
        content: 'You can <em>emphasize certain words</em> with the <code>em</code> HTML element. Emphasized text visually looks like a text link.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_info_circle,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>info-circle</em> icon for general information.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_calendar,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>calendar</em> icon for event notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_certification,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>certification</em> icon for Academy badge earning notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_pega_thumbs_up,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>pega-thumbs-up</em> icon for like notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_heart,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>heart</em> icon for favorite notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
    {% include '@bolt-components-notifications/notifications-list-item.twig' with {
      signifier: icon_reply,
      site_name: 'Site Name',
      timestamp: '3 days ago',
      message: {
        content: 'Use <em>reply</em> icon for reply notification.',
        attributes: {
          href: '#!',
        },
      },
    } only %}
  {% endset %}

  {% include '@bolt-components-notifications/notifications-list.twig' with {
    content: list_content,
  } only %}
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'View all notifications',
    reversed_underline: true,
    expand_click_target: true,
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: switch_button,
    actions: [
      {
        icon: icon_check_circle,
        label: 'Mark all as read',
        attributes: {
          type: 'button',
        },
      },
      {
        icon: icon_pega_setting,
        label: 'Notification settings',
        attributes: {
          href: '#!',
        },
      },
    ]
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

notifications empty state

Notifications Empty State Pass freeform content instead of notification list to render an empty state. Important Notes: An empty state can happen if there are literally no notifications to show, or all notifications have been read and user toggles to show only unread notifications. A simple empty state message can be passed to the content prop. Empty state means there are no notifications to read, do not render a "mark all as read" action button in such case. Demo
You are all caught up!
Twig
{% set icon_check_circle %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'check-circle',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_pega_setting %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'pega-setting',
    size: 'medium',
  } only %}
{% endset %}
{% set icon_face_happy %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'face-happy',
    size: 'medium',
  } only %}
{% endset %}
{% set header_switch_button %}
  {% include '@bolt-components-switch-button/switch-button.twig' with {
    label: 'Only show unread notifications',
    attributes: {
      class: 'js-target-the-switch-button-container'
    },
  } only %}
{% endset %}
{% set header_actions %}
  {% include '@bolt-components-notifications/notifications-header-action.twig' with {
    icon: icon_pega_setting,
    label: 'Notification settings',
    attributes: {
      href: '#!',
    },
  } only %}
{% endset %}
{% set content %}
  <div class="u-bolt-padding-top-large u-bolt-padding-right-medium u-bolt-padding-bottom-large u-bolt-padding-left-medium u-bolt-text-align-center">
    <span class="u-bolt-margin-right-small">{{ icon_face_happy }}</span>You are all caught up!
  </div>
{% endset %}
{% set footer_content %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'View all notifications',
    reversed_underline: true,
    expand_click_target: true,
    attributes: {
      href: '#!',
    }
  } only %}
{% endset %}

{% include '@bolt-components-notifications/notifications.twig' with {
  header: {
    switch_button: header_switch_button,
    actions: header_actions,
  },
  content: content,
  footer: {
    content: footer_content,
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.