Alert #

import Alert from '@ryanatkn/fuz/Alert.svelte'; <Alert>info</Alert>

✻

info

With custom icon
#

icon can be a string prop or snippet:

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

▷

icon as a string prop

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

✻◡✻

icon as a snippet

Alerts can be buttons by including an onclick prop. This API may change because it's a bit of a mess - a separate AlertButton 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 AlertStatus = 'inform' | 'help' | 'error';

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

the computer is mistaken

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

➺

here's how to fix it

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

➺

the color prop overrides the status color