notifications docs

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

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
View all notifications
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
Notification settings
You are all caught up!
View all notifications
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.