`<dj-alert>`

An inline status banner.

It sits in the page flow, next to the content it concerns. For a short message that floats and goes away, use dj-snackbar. For a full-page outcome, use dj-result.

Try it in the playground

@dojo-ng/alert · v0.1.1

npm install @dojo-ng/alert

import "@dojo-ng/alert";

Showing and closing

An alert in markup shows by default (open is true).
close() hides it and emits dj-close. A closed alert takes no space.
Add closable for a close button. Its label is the localized close message.

Variants

info and success announce politely (role="status").
warning and danger announce immediately (role="alert").
Each variant has a default icon. Replace it with the icon slot.
Colors come from the theme's semantic scales. To change one alert, set --dj-alert-background, --dj-alert-color, and --dj-alert-accent-color on it.

Properties

Property	Attribute	Type	Default
`variant`Semantic variant. Reflected so `:host([variant="…"])` and page CSS can target it.	`variant` reflected	`"info""success""warning""danger"`	`"info"`
`closable`Show a close button.	`closable`	`boolean`	`false`
`open`Whether the alert is shown. Reflected; defaults true so markup alerts appear.	`open` reflected	`boolean`	`true`

Events

Event	Description
`dj-close`	after the alert closes

Slots

Slot	Description
Default slot	the message
`icon`	replaces the default variant glyph

CSS parts

Style these with dj-alert::part(name).

baseiconmessageclose

CSS custom properties

Property	Default	Description
`--dj-alert-background`	`per-variant tint`	Banner background; defaults to the variant's `--dj-color-*-100`.
`--dj-alert-color`	`per-variant ink`	Text color; defaults to the variant's `--dj-color-*-700`.
`--dj-alert-accent-color`	`per-variant accent`	Icon + leading-border color; defaults to the variant's `--dj-color-*-600`.
`--dj-alert-radius`	`var(--dj-input-border-radius-medium)`	Corner radius.

Methods

Method	Description
`close()`	Close the alert: hides it and emits `dj-close` once. No-op if already closed.