Create an alert

Create an alert with various styles

alert(
  ...,
  type = c("default", "standard"),
  close = FALSE,
  color = c("none", "primary", "secondary", "info", "success", "danger", "warning"),
  outline = FALSE,
  icon = NULL
)

Arguments

...	Content of the alert
type	Choose a style for the alert, choices include "default", "standard"
close	Allow alert to be closable, TRUE or FALSE
color	Color of the alert, choose between "none", "primary", "secondary", "info", "success", "danger", "warning"
outline	Include an outline and exclude background, TRUE or FALSE
icon	Include an icon to the left of the content

Value

HTML of an alert box to be inserted within a page

Examples

card(
  header = FALSE,
  shiny::h2("Standard alert (closeable)"),
  alert("EX1", type = "standard",
  color = "primary"),
  alert("EX2", type = "standard",
  color = "secondary"),
  alert("EX3", type = "standard",
  color = "secondary", outline = TRUE),
  alert("EX4", type = "standard",
  color = "danger", outline = TRUE, close = TRUE),
  alert("EX5", type = "standard",
  close = TRUE),
  alert("EX6", type = "standard",
  color = "primary", icon = shiny::icon("info"))
)
#> <div class="col-12 p-0 sortable-grid ui-sortable">
#>   <div id="box1658383164" class="panel panel-sortable" role="widget">
#>     <div class="panel-container collapse show" role="content">
#>       <div class="loader">
#>         <i class="fa fa-spinner-third fa-spin-4x fs-xxl"></i>
#>       </div>
#>       <div class="panel-content">
#>         <h2>Standard alert (closeable)</h2>
#>         <div class="alert-dismissible fade show alert alert-primary">
#>           <div class="d-flex align-items-center">
#>             <div>EX1</div>
#>           </div>
#>         </div>
#>         <div class="alert-dismissible fade show alert alert-secondary">
#>           <div class="d-flex align-items-center">
#>             <div>EX2</div>
#>           </div>
#>         </div>
#>         <div class="alert-dismissible fade show alert border border-secondary bg-transparent text-secondary">
#>           <div class="d-flex align-items-center">
#>             <div>EX3</div>
#>           </div>
#>         </div>
#>         <div class="alert-dismissible fade show alert border border-danger bg-transparent text-danger">
#>           <div type="button" class="close" data-dismiss="alert" aria-label="Close">
#>             <span aria-hidden="true">
#>               <i class="fa fa-times-circle"></i>
#>             </span>
#>           </div>
#>           <div class="d-flex align-items-center">
#>             <div>EX4</div>
#>           </div>
#>         </div>
#>         <div class="alert-dismissible fade show alert alert-none">
#>           <div type="button" class="close" data-dismiss="alert" aria-label="Close">
#>             <span aria-hidden="true">
#>               <i class="fa fa-times-circle"></i>
#>             </span>
#>           </div>
#>           <div class="d-flex align-items-center">
#>             <div>EX5</div>
#>           </div>
#>         </div>
#>         <div class="alert-dismissible fade show alert alert-primary">
#>           <div class="d-flex align-items-center">
#>             <div class="alert-icon">
#>               <i class="fa fa-info"></i>
#>             </div>
#>             <div>EX6</div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>   </div>
#> </div>