Skip to contents

The notification is a special type of list item, that unlike others can group items within self.

See the official documention for notification, for all the correct props.

ul(
  `header-text` = "Notifications",
  li_notification_group(
    `show-counter` = TRUE, 
    `title-text` = "Orders",
    priority = "High",
    `show-close` = TRUE,
    li_notification(
      `title-text` = "New employee joined",
      `show-close` = TRUE,
      priority = "High",
      avatar(initials = "JC", slot = "avatar", size = "XS"),
      htmltools::span("John Coene", slot = "footnotes"),
      htmltools::span("CTO", slot = "footnotes"),
      li_notification_action("libtn1", text = "Accept", icon = "accept", slot = "actions"),
      li_notification_action("libtn2", text = "Reject", icon = "message-error", slot = "actions"),
      "This is a notification"
    ),
    li_notification(
      `title-text` = "New employee joined",
      `show-close` = TRUE,
      priority = "Low",
      avatar(initials = "JC", slot = "avatar", size = "XS"),
      htmltools::span("John Coene", slot = "footnotes"),
      htmltools::span("CTO", slot = "footnotes"),
      li_notification_action("libtn1", text = "Accept", icon = "accept", slot = "actions"),
      li_notification_action("libtn2", text = "Reject", icon = "message-error", slot = "actions"),
      "This is another notification"
    )
  )
)
John Coene CTO This is a notification John Coene CTO This is another notification