Alert
RC 1Kb
An element that displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
js
import 'pyro/alert'Usage
html
<pyro-alert severity="info" band>
<pyro-icon slot="icon" src="../info.svg"></pyro-icon>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus modi ipsum culpa ipsa labore nam ratione,
nisi in perferendis itaque ipsam, consequuntur qui, natus alias veniam dolor ex error fuga!
</pyro-alert>Variations
Severiy color
Info
Success
Warning
Error
Dismissable
The prop dismissable adds a close icon to the end of the alert that the user can click to close it. Once closed, pyro-alert goes display: none and has a static dismissed attribute.
Band
With a slight border on the left
Props
ts
interface AlertProps {
/** Alert severity, determines colors */
severity?: Severity;
/** Adds a bright colored band to the alert left, similar to a border */
band?: boolean;
/** Adds an cross icon to dismiss the alert */
dismissible?: boolean;
/** (static) Added if the alert was dismissed */
dismissed?: boolean;
/** Contents of the alert */
children?: any;
}Slots
ts
/**
* @slot - (default) Content of alert
* @slot icon - a pyro-icon or generic image. Receives the css `color` and `fill` based on severity
* @slot dismissible - overrides the default dimissible icon, if used
*/CSS prop theming
The main theming comes from the severity color prop and the icons slot. The lighter version is used as a background, while the original value is for the band and icon.
In the first part of the sheet are generic css properties, while the second block has options to theme it based on the severity.
Full theming sheet
js
/**
* @prop {--pyro-alert-text-color = --pyro-text-color} - `color`
* @prop {--pyro-alert-surface-color = --pyro-surface-color} - `background` (when no `severity` is set)
* @prop {--pyro-alert-border = --pyro-border} - `border`
* @prop {--pyro-alert-border-radius = --pyro-border-radius} - `border-radius`
* @prop {--pyro-alert-spacing = --pyro-spacing} - `padding`
*
* Severity
* @prop {--pyro-alert-info-color = --pyro-info-color} - `color` (icon, band)
* @prop {--pyro-alert-info-color-lighter = --pyro-info-color-lighter} - `background`
* @prop {--pyro-alert-success-color = --pyro-success-color} - `color` (icon, band)
* @prop {--pyro-alert-success-color-lighter = --pyro-success-color-lighter} - `background`
* @prop {--pyro-alert-warning-color = --pyro-warning-color} - `color` (icon, band)
* @prop {--pyro-alert-warning-color-lighter = --pyro-warning-color-lighter} - `background`
* @prop {--pyro-alert-error-color = --pyro-error-color} - `color` (icon, band)
* @prop {--pyro-alert-error-color-lighter = --pyro-error-color-lighter} - `background`
*
* Variation based
* @prop {--pyro-alert-band-width = calc(--pyro-border-width) * 4} - left band `width`
* @prop {--pyro-alert-dismissable-width = 1em} - dismissable icon `width`
*/