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="warning">This is a warning message!</dt-alert> export class WarningAlertExampleComponent { } This is a warning message! export class WarningAlertExampleComponent { }

This component is themable. Related topic: validation guidelines

Alerts on dark background

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

More than 2 rows alert

Alerts with more than 2 lines of text should include a headline.

Warning styleguide
x: 8px
font-family: Bernina Sans Regular
font-size: 16px
color: $gray-700

Error messages

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

For more information about validation in forms please read the validation guidelines.

Position of warnings

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

You can see an example of the warning usage concerning a specific content in the validation guidelines.

Alert

Imports

You have to import the DtAlertModule when you want 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 WarningAlertExampleComponent { } This is a warning message! export class WarningAlertExampleComponent { }
Attribute Description
dt-alert The component

Options & Properties

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 ErrorAlertExampleComponent { } This is an error message! export class ErrorAlertExampleComponent { }

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> <button dt-button (click)="alert1.severity=undefined">Set undefined</button> export class InteractiveAlertExampleComponent { }
This is a message!
export class InteractiveAlertExampleComponent { }

Dark mode

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