Alert

The alert component informs users about necessary configuration actions (warnings) or warns users about failed actions or other events that do not require actions from the user (error messages).

´ Loading interactive demo...
<dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {} <dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {}

Variants

Errors

´ Loading interactive demo...
<dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {} <dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {}

Warnings

´ Loading interactive demo...
<dt-alert severity="warning">This is a warning message!</dt-alert> export class AlertWarningExample {} <dt-alert severity="warning">This is a warning message!</dt-alert> export class AlertWarningExample {}

Alerts on dark background

Alerts can be placed on dark backgrounds.

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-alert severity="warning">{{ text }}</dt-alert> </section> export class AlertDarkExample { text = `This is a warning on dark background!`; } <section class="dark" dtTheme=":dark"> <dt-alert severity="warning">{{ text }}</dt-alert> </section> export class AlertDarkExample { text = `This is a warning on dark background!`; }
´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-alert severity="error">{{ text }}</dt-alert> </section> export class AlertDarkErrorExample { text = `This is a error on dark background!`; } <section class="dark" dtTheme=":dark"> <dt-alert severity="error">{{ text }}</dt-alert> </section> export class AlertDarkErrorExample { text = `This is a error on dark background!`; }

Placement

For alerts that refer to a specific content such as a form, the message size should not exceed the width of the specific content.

Alerts in use

Read the validation guidelines for more information about how the alert component is used in a form.

Do's and don'ts

Do

  • Use a minimum textbox width of 260px.
  • Use a maximum textbox width of 580px.

Don'ts

  • Don't use walls of text – our alerts and warnings should be as small as possible but effective at the same time.

Imports

You have to import the DtAlertModule to use the dt-alert:

@NgModule({
  imports: [DtAlertModule],
})
class MyModule {}

Initialization

To apply the dynatrace alert component, use the <dt-alert> element. Example:

´ Loading interactive demo...
<dt-alert severity="warning">This is a warning message!</dt-alert> export class AlertWarningExample {} <dt-alert severity="warning">This is a warning message!</dt-alert> export class AlertWarningExample {}

Options & Properties

The alert component is a wrapper component that holds a dt-icon and some text.

Name Type Default Description
[severity] error | warning | undefined undefined Sets the alert severity
<ng-content> The text (error/warning) message which should be displayed.

Examples

Error

´ Loading interactive demo...
<dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {} <dt-alert severity="error">This is an error message!</dt-alert> export class AlertErrorExample {}

Interactive example

´ Loading interactive demo...
<div> <dt-alert severity="error" #alert1>This is a message!</dt-alert> </div> <button dt-button (click)="alert1.severity = 'warning'">Set Warning</button> <button dt-button (click)="alert1.severity = 'error'">Set Error</button> export class AlertInteractiveExample {} <div> <dt-alert severity="error" #alert1>This is a message!</dt-alert> </div> <button dt-button (click)="alert1.severity = 'warning'">Set Warning</button> <button dt-button (click)="alert1.severity = 'error'">Set Error</button> export class AlertInteractiveExample {}

Dark mode

´ Loading interactive demo...
<section class="dark" dtTheme=":dark"> <dt-alert severity="warning">{{ text }}</dt-alert> </section> export class AlertDarkExample { text = `This is a warning on dark background!`; } <section class="dark" dtTheme=":dark"> <dt-alert severity="warning">{{ text }}</dt-alert> </section> export class AlertDarkExample { text = `This is a warning on dark background!`; }