Maskowlabs Logo Maskowlabs

Alerts

Alerts are used to provide feedback to the user. 

1<x-alert title="Watch out!">
2    This is an important alert you should not miss.
3</x-alert>

Types

Alerts come in different types: primary, success, warning, danger and info.

An alert without a type uses the alert-default-type config value, which is warning by default.

 1<x-alert type="primary" title="Waiting for approval…">
 2    Your request is still pending approval. We will notify you once it is approved.
 3</x-alert>
 4<x-alert type="success" title="Application submitted">
 5    Your application has been submitted successfully.
 6</x-alert>
 7<x-alert type="warning" title="Incomplete form">
 8    Complete all required fields before submitting the form.
 9</x-alert>
10<x-alert type="danger" title="Permission denied">
11    You do not have permission to access this resource.
12</x-alert>

Icons

Add icons to your alerts by using the icon attribute. 

 1<x-alert type="primary" title="Waiting for approval…" icon="clock--mini">
 2    Your request is still pending approval. We will notify you once it is approved.
 3</x-alert>
 4<x-alert type="success" title="Application submitted" icon="check--micro">
 5    Your application has been submitted successfully.
 6</x-alert>
 7<x-alert type="warning" title="Incomplete form" icon="exclamation-triangle--mini">
 8    Complete all required fields before submitting the form.
 9</x-alert>
10<x-alert type="danger" title="Permission denied" icon="x-mark--mini">
11    You do not have permission to access this resource.
12</x-alert>

Sizes

You can use the size attribute to change the size of the alert. Available sizes are xs, sm and md — the default is md.

The size scales the whole alert consistently: padding, icon, title and text. You can change the default size for all alerts via the alert-default-size config value.

1<x-alert size="xs" type="info" title="Extra small" icon="clock--mini">
2    A compact alert for dense UIs like tables, sidebars or form hints.
3</x-alert>
4<x-alert size="sm" type="info" title="Small" icon="clock--mini">
5    A slightly reduced alert that saves space without losing presence.
6</x-alert>
7<x-alert size="md" type="info" title="Default" icon="clock--mini">
8    The regular alert size — used whenever no size is set.
9</x-alert>

Title only

You can also display an alert with only a title. 

1<x-alert type="success" title="You've successfully invited John Doe" />
2<x-alert type="danger" title="Unable to send invitation to Jane Doe" icon="x-mark--micro" />

Text only

You can also display an alert with only text. 

1<x-alert>
2    This is an important alert you should not miss.
3</x-alert>
4 
5<x-alert icon="check--micro">
6    This is an important alert you should not miss.
7</x-alert>

Configuration

Change the default type and size of all alerts in config/basic-components.php. The type and size attributes always take precedence. 

 1// config/basic-components.php
 2 
 3return [
 4    // ...
 5 
 6    // primary, success, warning, danger or info
 7    'alert-default-type' => 'warning',
 8 
 9    // xs, sm or md
10    'alert-default-size' => 'md',
11 
12    // ...
13];

Styling

The sizes are defined in the $alert-sizes map of utilities/variables/_variables-alerts.scss, the colors per type in the $alerts map of the same file. The md entry styles every .alert, the other entries add an .alert-xs or .alert-sm class on top.

To restyle a size, change its entry in your own variables file (see Configuration). A new entry with the same keys becomes a new value for the size attribute. 

 1// utilities/variables/_variables-alerts.scss
 2 
 3$alert-sizes: (
 4    'xs': ( ...
 5        'padding': 0.5rem 0.875rem,
 6        'padding-icon': 0.5rem,
 7        'padding-compact': 0.375rem 0.625rem,
 8        'gap': 0.5rem,
 9        'gap-compact': 0.4375rem,
10        'radius': 0.5rem,
11        'title-font-size': $fs-xs,
12        'title-margin-bottom': 0.125rem,
13        'slot-font-size': $fs-xxs,
14        'icon-size': 1.5rem,
15        'icon-font-size': $fs-sm,
16        'icon-glyph': 0.75rem,
17        'icon-glyph-font': 0.6875rem,
18        'icon-size-compact': 1.125rem,
19        'icon-size-compact-font': 1.3rem,
20        'icon-font-size-compact': $fs-xs,
21    ), 
22    'sm': ( ...
23        'padding': 0.75rem 1.125rem,
24        'padding-icon': 0.75rem,
25        'padding-compact': 0.5rem 0.75rem,
26        'gap': 0.75rem,
27        'gap-compact': 0.5rem,
28        'radius': 0.625rem,
29        'title-font-size': $fs-sm,
30        'title-margin-bottom': 0.1875rem,
31        'slot-font-size': $fs-xs,
32        'icon-size': 1.75rem,
33        'icon-font-size': $fs-md,
34        'icon-glyph': 0.875rem,
35        'icon-glyph-font': 0.8125rem,
36        'icon-size-compact': 1.25rem,
37        'icon-size-compact-font': 1.5rem,
38        'icon-font-size-compact': $fs-sm,
39    ), 
40    'md': (
41        'padding': 1rem 1.5rem,              // default padding
42        'padding-icon': 1rem,                // padding when the alert has an icon
43        'padding-compact': 0.75rem 1rem,     // title-only or text-only alerts
44        'gap': 1rem,                         // space between icon and content
45        'gap-compact': 0.625rem,             // same, for title-only or text-only alerts
46        'radius': $radius-alert,
47        'title-font-size': $fs,
48        'title-margin-bottom': 0.25rem,
49        'slot-font-size': $fs-sm,
50        'icon-size': 2rem,                   // diameter of the round icon badge
51        'icon-font-size': $fs-lg,            // font-size of the badge
52        'icon-glyph': 1rem,                  // size of the icon itself
53        'icon-glyph-font': 0.9375rem,        // same, for font icons
54        'icon-size-compact': 1.5rem,         // badge in title-only or text-only alerts
55        'icon-size-compact-font': 1.8rem,    // same, for font icons
56        'icon-font-size-compact': $fs-md,    // badge font-size in those alerts
57    ),
58);