Alert

The alert component informs users about necessary configuration actions or failures.

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

Imports

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

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

Initialization

To use the alert component, add the <dt-alert> element to your page.

Inputs

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

Variants

Depending on the value of the severity input an error- or warning-alert is rendered.

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

Alerts can be placed on dark background.

´ 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!`; }

Alerts in use

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

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

Do's and don'ts

  • Use a minimum textbox width of 260px.
  • Use a maximum textbox width of 580px.
  • Don't use walls of text – our alerts and warnings should be as small as possible but effective at the same time.