Alert

<sw-alert>

ready
The sw-alert component is used to convey important information to the user. It comes in 4 variations, success, info, warning and error. These have default icons assigned which can be changed and represent different actions

Usage

Loading...
<sw-alert variant="info" title="Example title" :closable="true">
   Sample text
</sw-alert>

Component properties

Property name Type Default
variant String info
appearance String default
title String
showIcon Boolean true
closable Boolean false
notificationIndex String

Imports

  • ./sw-alert.html.twig
  • ./sw-alert.scss

SASS variables

Variable name Value
$sw-alert-box-shadow 1px 2px 5px rgba(0, 0, 0, 0.1)
$sw-alert-size-close 40px

Twig blocks

  • sw_alert_icon
  • sw_alert_title
  • sw_alert_slot_default
  • sw_alert_message
  • sw_alert_body
  • sw_alert_actions
  • sw_alert_close
  • sw_alert_inner
  • sw_alert

Slots

  • customIcon
  • default
  • actions