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.

Default Alert
Dark theme
Gray theme
Info
Success
Warning
Error
Alert type overlay

<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>

Attribute	Description	Values	Default
title	Sets the alert title	String	–
indicator	Adds an indicator symbol before the title	`success`, `error`, `warning`, `info`	none
accent-border	Support the indicator with a colored border on inline Alerts	–	false
show	To choose the overlay variant, simply set where to show	`inline`, `top-left`, `top-right`, `bottom-left`, `bottom-right`	`inline`
hidden	Make an inserted Alert invisible on screen and for screen readers	–	–
theme	Adapt the color scheme of the component	`light`, `dark`, `gray`	`light`
duration	A positive value >0 sets the time in seconds when to disappear automatically	Number
submit-button-label	Buttons have been discarded in version 3.2 – use Modal Dialog instead	discontinued
cancel-button-label	Buttons have been discarded in version 3.2 – use Modal Dialog instead	discontinued

Callback	Argument	Description
onClose	Object	Pass a callback function that gets triggered when the Alert closes
onSubmit	event	Pass a callback function that gets triggered when the submit button is pressed
onCancel	event	Pass a callback function that gets triggered when the cancel button is pressed

Slot	Slotted content
default	Slot 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>