The alert component informs users about necessary configuration actions (warnings) or informs users about failed actions or other events that do not require actions from the user (error messages).
<dt-alert severity="warning">This is a warning message!</dt-alert>
<dt-alert severity="error">This is an error message!</dt-alert>
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 | info |
error |
Sets the alert severity. |
<ng-content> |
The text (error/warning/info) message which should be displayed. |
Variants
Depending on the value of the severity
input an error- or warning-alert is
rendered.
<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 = 'info'">Set Info</button>
Dark background
Alerts can be placed on dark background.
<section class="dt-example-dark" dtTheme=":dark">
<dt-alert severity="warning">{{ text }}</dt-alert>
</section>
<section class="dt-example-dark" dtTheme=":dark">
<dt-alert severity="error">{{ text }}</dt-alert>
</section>
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.