UI MarCom 3

Alerts Stable Updated Dark Theme

Alerts are notifications that attract the user’s attention. They can be directly related to an interactive process and give the user feedback on the success or failure of an action.

<uimc-alert 
  title="Nutzung von Cookies"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

AttributeDescriptionValuesDefault
titleSets the alert titleString
indicatorAdds an indicator symbol before the titlesuccess, error, warning, infonone
accent-borderSupport the indicator with a colored border on inline Alertsfalse
showTo choose the overlay variant, simply set where to showinline, top-left, top-right, bottom-left, bottom-rightinline
hiddenMake an inserted Alert invisible on screen and for screen readers
themeAdapt the color scheme of the componentlight, dark, graylight
durationA positive value >0 sets the time in seconds when to disappear automaticallyNumber
submit-button-labelButtons have been discarded in version 3.2 – use Modal Dialog insteaddiscontinued
cancel-button-labelButtons have been discarded in version 3.2 – use Modal Dialog insteaddiscontinued
CallbackArgumentDescription
onCloseObjectPass a callback function that gets triggered when the Alert closes
onSubmiteventPass a callback function that gets triggered when the submit button is pressed
onCanceleventPass a callback function that gets triggered when the cancel button is pressed

SlotSlotted content
defaultSlot for description

Default Alert

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Dark Theme

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  accent-border
  theme="dark"
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Gray Theme

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  accent-border
  theme="gray"
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Info

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  indicator="info"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Success

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  indicator="success"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Warning

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  indicator="warning"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Error

Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
<uimc-alert 
  title="Nutzung von Cookies"
  indicator="error"
  accent-border
>
  Siemens Healthineers in Österreich verwendet Cookies um Statistiken über das Verhalten unserer Benutzer zu sammeln.
</uimc-alert>

Alert type overlay

Alerts can be show as an overlay in each corner of the viewport. Click the button to let them appear:

<uimc-alert 
  id="alert-1"
  title="Alert in the top left corner"
  hidden
  show="top-left"
  duration="6000"
>
  It will automatically close after 6 seconds.
</uimc-alert>