Alert

Overview

Alert renders colored callout blocks. Use it when content needs emphasis without breaking the reading flow.

Example

Markdown Usage

Import the Alert component into the markdown, then pass a type prop and the Alert content as children:

import Alert from '$ui/alert';
 
<Alert type="note">This is a note alert.</Alert>
<Alert type="tip">This is a tip alert.</Alert>
<Alert type="warning">This is a warning alert.</Alert>
<Alert type="caution">This is a caution alert.</Alert>

Setting a Custom Title

By default, the title is derived from the alert type. Use title when you need a more specific label.

import Alert from '$ui/alert';
 
<Alert type="warning" title="Heads up">
	This alert uses a custom title.
</Alert>

Props

Editing the Component

Alert lives in src/lib/components/ui/alert.