Alerts

Display customizable alerts to garner attention and provide critical actions.

javascript 
import { Alert } from '@brainandbones/skeleton';

Examples

Usage

typescript 
let visible: boolean = true;
html 
<Alert {visible}>
    <svelte:fragment slot="lead">(icon)</svelte:fragment>
    <svelte:fragment slot="title">(title)</svelte:fragment>
    <span>(message)</span>      
    <svelte:fragment slot="trail">(trail)</svelte:fragment>
</Alert>

Properties

Prop Type Default Description
visiblebooleantrueControl visibility of the alert.
backgroundstringbg-accent-500/30Provide classes to set background color.
borderstringborder-l-4 border-l-accent-500Provide classes to set the border styles.
colorstring-Provide classes to set text color.
radiusstring-Provide classes to set border radius.
durationnumber200Svelte fade transition duration. Set 0 to disable.

Slots

Slot Style Prop Description
leadslotLeadProvide a leading element, such as an icon.
titleslotContent > .alert-titleProvide the alert title text.
defaultslotContent > .alert-messageProvide the alert message text.
trailslotTrailProvide a trailing element, such as a call to action.

Accessibility

Makes use of role="alert" and aria-live="polite".