Alert# <Alert variant=AlertVariant::Success>
<AlertTitle slot>"Success"</AlertTitle>
<AlertContent slot>"Action completed"</AlertContent>
</Alert>
Success Action completed. Info This concept is based on [...] Warn This is not plausible. Danger There was an error! Customization# The default_icon_slot can be specified to change the default position of the icon. Slot `None` will lead to no icon being rendered. Both AlertTitle andAlertContent can be omitted. The AlertPrepend andAlertAppend slot can be overridden. Custom ids, classes and styles can be applied to all slots. <Alert variant=AlertVariant::Success default_icon_slot=AlertIconSlot::None>
<AlertPrepend slot style="align-items: center; font-size: 1.8em; margin: 0;">"🎉"</AlertPrepend>
<AlertTitle slot style=r#"
align-items: center;
justify-content: center;
height: 100%;
text-transform: uppercase;
font-size: 1.3em;
"#>
"Success"
</AlertTitle>
<AlertAppend slot style="align-items: center; font-size: 1.8em; margin: 0;">"🎉"</AlertAppend>
</Alert>
🎉 Success 🎉 <Alert variant=AlertVariant::Warn default_icon_slot=AlertIconSlot::None>
<AlertTitle slot style="text-transform: uppercase; font-size: 1.3em;">
"Warning"
<AlertIcon variant=AlertVariant::Warn style="margin-left: 0.5em;" />
</AlertTitle>
<AlertContent slot>"This is dangerous!"</AlertContent>
</Alert>
Warning This is dangerous! Styling# You may overwrite any of the following CSS variables to meet your styling needs.
--alert-margin
--alert-padding
--alert-border
--alert-border-radius
--alert-primary-background-color
--alert-primary-color
--alert-info-background-color
--alert-info-color
--alert-success-background-color
--alert-success-color
--alert-warn-background-color
--alert-warn-color
--alert-danger-background-color
--alert-danger-color