Alert #

import Alert from '@ryanatkn/fuz/Alert.svelte';

<Alert>info</Alert>

icon can be a string prop or snippet:

<Alert icon="▷">
	icon as a string prop
</Alert>

<Alert>
	{#snippet icon(t)}{t}◡{t}{/snippet}
	icon as a snippet
</Alert>

Alerts can be buttons by including an onclick prop. This API may change because it's a bit of a mess - a separate Alert_Button may be better.

<Alert onclick={() => clicks++}>
	alerts can be buttons{'.'.repeat(clicks)}
</Alert>

clicks: 0

The status prop, which defaults to 'inform', changes the default icon and color.

// @ryanatkn/fuz/alert.js
export type Alert_Status = 'inform' | 'help' | 'error';

<Alert status="error">
	the computer is mistaken
</Alert>

<Alert status="help">
	here's how to fix it
</Alert>

<Alert status="help" color="var(--color_d_5)">
	the <code>color</code> prop overrides the status color
</Alert>