Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script lang="ts">
import "./Alert.scss";
import classNames from "$lib/util/classNames";
import type { Variant } from "./alertOptions";
export let noIcon = false;
export let slim = false;
export let siteAlert = false;
export let variant: Variant = "info";
export let heading = "";
const elementRole = {
error: "alert",
success: "status",
info: "region",
warning: "region",
};
// Only display aria-label for appropriate roles.
// Nullish-valued attributes will not be included.
const ariaLabel = {
info: "Informational status alert",
warning: "Warning status alert",
error: null,
success: null,
};
let className = "";
export { className as class };
$: classes = classNames(
"usa-alert",
`usa-alert--${variant}`,
noIcon ? "usa-alert--no-icon" : null,
slim ? "usa-alert--slim" : null,
siteAlert ? "ldaf-alert--site-wide" : null,
className,
);
</script>
<div class={classes} role={elementRole[variant]} aria-label={ariaLabel[variant]}>
<div class="usa-alert__body">
{#if heading && !slim}
<h4 class="usa-alert__heading">
{heading}
</h4>
{/if}
<p class="usa-alert__text">
<slot />
</p>
</div>
</div>
|