Alerts

An alert is like a digital tap on the shoulder, providing timely notifications or warnings to users. It's the digital equivalent of a gentle nudge, ensuring important information doesn't slip through the cracks. With an alert, users are kept informed and engaged, without feeling overwhelmed by a barrage of notifications.

Default alert

HTML
SCSS

<div class="alert" role="alert">
    <div class="left">
        123
    </div>
    <div class="center">
        123
    </div>
    <div class="right">
        123
    </div>
</div>

@use "sass:list";
@use "sass:string";
@use "sass:meta";
@use "sass:map";

@use "~/src/styles/app.scss" as app;

@use "@nulllogic/scssleon/scss/mixins.scss" as mixins;
@use "@nulllogic/scssleon/scss/functions.scss" as functions;

$alert: functions.get-theme(app.$theme, 'components.alert');

@include mixins.generate-component(
    $alert,
    "alert",
    app.$config,
    app.$theme
);