Docs

Searchv0.6.0 (main)
Getting started
OverviewInstallationThemesChangelog
Hooks
use_pressuse_moveuse_hoveruse_buttonuse_overlayuse_anchor_link
Atoms
ButtonPopoverAnchorLink
Components
Layout
StackGridSeparatorSkeletonApp BarDrawerTabsTableCollapsible
Input
ButtonInputTiptap editorDate & TimeSliderSelectCheckboxRadioToggleColor Picker
Feedback
AlertToastModalProgressPopoverChipKbd
General
TypographyIconLinkCallback

Alert#

<Alert variant=AlertVariant::Success> <AlertTitle slot>"Success"</AlertTitle> <AlertContent slot>"Action completed"</AlertContent> </Alert> SuccessAction completed.InfoThis concept is based on [...]WarnThis is not plausible.DangerThere 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 AlertTitleandAlertContent can be omitted.
  • The AlertPrependandAlertAppend 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> WarningThis 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