calcite_notice: Create a Calcite Notice Component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Calcite Notice Component

Description

Creates a notice component for displaying informative, contextually relevant messages. Best for persistent information that can be open at page load or displayed as a result of user action.

Usage

calcite_notice(
  ...,
  title = NULL,
  message = NULL,
  link = NULL,
  actions_end = NULL,
  id = NULL,
  open = NULL,
  closable = NULL,
  icon = NULL,
  icon_flip_rtl = NULL,
  kind = NULL,
  scale = NULL,
  width = NULL
)

Arguments

...	Additional content passed to the component
title	Content for the title slot
message	Content for the message slot
link	Content for the link slot (e.g. a calcite_link())
actions_end	Content for the actions-end slot
id	Component ID (required for Shiny reactivity)
open	Whether the notice is visible (default: FALSE)
closable	Whether to show a close button (default: FALSE)
icon	Show default icon (TRUE) or specific icon name (string)
icon_flip_rtl	Flip icon in RTL languages (default: FALSE)
kind	Type of notice: "brand", "danger", "info", "success", or "warning"
scale	Size of the component: "s" (small), "m" (medium), or "l" (large)
width	Width behavior: "auto" or "full" (note: "half" is deprecated)

Details

Shiny Integration

The notice emits events when opened or closed, making it easy to track state and respond to user dismissals.

Available properties in input$id:

• ⁠$open⁠ - Whether the notice is currently visible

• ⁠$closable⁠ - Whether the notice can be closed

• ⁠$kind⁠ - The type of notice

• Other component properties

Basic usage:

calcite_notice(
  id = "my_notice",
  open = TRUE,
  closable = TRUE,
  kind = "success",
  icon = TRUE,
  title = "Success!",
  message = "Your changes have been saved."
)

# In server - detect when user closes the notice
observeEvent(input$my_notice$open, {
  if (!input$my_notice$open) {
    message("User dismissed the notice")
  }
})

Show/hide from server:

# Show a notice
update_calcite("my_notice", open = TRUE)

# Hide a notice
update_calcite("my_notice", open = FALSE)

Slots

The notice supports several slots for organizing content:

• title: The notice title

• message: The notice message

• link: A calcite-action for links like "Read more"

• actions-end: Additional actions (recommended: 2 or fewer)

Best Practices

• Use for informative, contextually relevant information

• Can be open at page load or shown based on user action

• Can be persistent or closable

• Use appropriate kind to convey message severity

Value

An object of class calcite_component

References

Official Documentation

Examples

# Basic notice
calcite_notice(
  open = TRUE,
  icon = TRUE,
  closable = TRUE,
  title = "New feature available",
  message = "Check out the reporting dashboard"
)

# Notice with specific icon and kind
calcite_notice(
  open = TRUE,
  kind = "danger",
  icon = "exclamation-mark-triangle",
  title = "Error in form",
  message = "Please correct the highlighted fields"
)

# Notice with action link
calcite_notice(
  open = TRUE,
  icon = "layers-reference",
  title = "Try this trick",
  message = "Select multiple layers at once",
  link = calcite_link(text = "Read more", href = "#")
)

# Shiny example with server control
if (interactive()) {
  library(shiny)

  ui <- calcite_shell(
    calcite_panel(
      heading = "Notice Demo",

      calcite_notice(
        id = "my_notice",
        open = FALSE,
        closable = TRUE,
        kind = "success",
        icon = TRUE,
        title = "Success!",
        message = "Your action completed successfully"
      ),

      calcite_button(
        id = "show_notice",
        "Show Notice"
      ),

      verbatimTextOutput("notice_status")
    )
  )

  server <- function(input, output, session) {
    observeEvent(input$show_notice$clicks, {
      update_calcite("my_notice", open = TRUE)
    })

    output$notice_status <- renderPrint({
      input$my_notice
    })
  }

  shinyApp(ui, server)
}

calcite documentation built on March 3, 2026, 5:07 p.m.