Bolt Design System

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

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

npm install @bolt/components-notifications

Dependencies

@bolt/core-v3.x

Notifications

UI element that displays notifications and related user actions.