Alert

You'll still get emails from people who accidentally deleted their account, but at least you tried.

<script>
	import { Alert, AlertActions, AlertDescription, AlertTitle } from '$lib/components/alert';
	import { Button } from '$lib/components/button';

	let isOpen = false;
</script>

<Button type="button" onclick={() => (isOpen = true)}>Refund payment</Button>
<Alert bind:open={isOpen} onclose={() => (isOpen = false)}>
	<AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
	<AlertDescription>
		The refund will be reflected in the customer’s bank account 2 to 3 business days after
		processing.
	</AlertDescription>
	<AlertActions>
		<Button plain onclick={() => (isOpen = false)}>Cancel</Button>
		<Button onclick={() => (isOpen = false)}>Refund</Button>
	</AlertActions>
</Alert>

Component API

Prop	Default	Description
Alert extends the Headless UI <Dialog> component
open	-	Whether the alert is open or not.
onclose	-	Called when the alert is dismissed.
size	md	The max-width of the alert.
AlertTitle extends the Headless UI <DialogTitle> component
This component does not expose any component-specific props.
AlertDescription extends the Headless UI <Description> component
This component does not expose any component-specific props.
AlertBody extends the JSX <div> element
This component does not expose any component-specific props.
AlertActions extends the JSX <div> element
This component does not expose any component-specific props.

Examples

Basic example

Use the Alert, AlertTitle, AlertDescription, and AlertActions components to build an alert:

<script>
	import { Alert, AlertActions, AlertDescription, AlertTitle } from '$lib/components/alert';
	import { Button } from '$lib/components/button';

	let isOpen = false;
</script>

<Button type="button" onclick={() => (isOpen = true)}>Refund payment</Button>
<Alert bind:open={isOpen} onclose={() => (isOpen = false)}>
	<AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
	<AlertDescription>
		The refund will be reflected in the customer’s bank account 2 to 3 business days after
		processing.
	</AlertDescription>
	<AlertActions>
		<Button plain onclick={() => (isOpen = false)}>Cancel</Button>
		<Button onclick={() => (isOpen = false)}>Refund</Button>
	</AlertActions>
</Alert>

Alert width

Use the size prop on the Alert component to control the max-width of the alert dialog:

<script>
	import { Alert, AlertActions, AlertDescription, AlertTitle } from '$lib/components/alert';
	import { Button } from '$lib/components/button';

	let isOpen = false;
</script>

<Button type="button" onclick={() => (isOpen = true)}>Refund payment</Button>
<Alert bind:open={isOpen} onclose={() => (isOpen = false)} size="lg">
	<AlertTitle>Are you sure you want to refund this payment?</AlertTitle>
	<AlertDescription>
		The refund will be reflected in the customer’s bank account 2 to 3 business days after
		processing.
	</AlertDescription>
	<AlertActions>
		<Button plain onclick={() => (isOpen = false)}>Cancel</Button>
		<Button onclick={() => (isOpen = false)}>Refund</Button>
	</AlertActions>
</Alert>

Available size options include xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and 5xl.

With body

Add content to your alert using the AlertBody component:

<script>
	import {
		Alert,
		AlertActions,
		AlertBody,
		AlertDescription,
		AlertTitle
	} from '$lib/components/alert';
	import { Button } from '$lib/components/button';
	import { Input } from '$lib/components/input';

	let isOpen = false;
</script>

<Button type="button" onclick={() => (isOpen = true)}>Delete repository</Button>
<Alert bind:open={isOpen} onclose={() => (isOpen = false)} size="sm">
	<AlertTitle>Verification required</AlertTitle>
	<AlertDescription>To continue, please enter your password.</AlertDescription>
	<AlertBody>
		<Input name="password" type="password" aria-label="Password" placeholder="•••••••" />
	</AlertBody>
	<AlertActions>
		<Button plain onclick={() => (isOpen = false)}>Cancel</Button>
		<Button onclick={() => (isOpen = false)}>Continue</Button>
	</AlertActions>
</Alert>

Auto-focusing elements

Add the autofocus prop to any form control or button in the dialog to automatically focus it when the dialog opens:

<script>
	import {
		Alert,
		AlertActions,
		AlertBody,
		AlertDescription,
		AlertTitle
	} from '$lib/components/alert';
	import { Button } from '$lib/components/button';
	import { Input } from '$lib/components/input';

	let isOpen = false;
</script>

<Button type="button" onclick={() => (isOpen = true)}>Delete repository</Button>
<Alert bind:open={isOpen} onclose={() => (isOpen = false)} size="sm">
	<AlertTitle>Verification required</AlertTitle>
	<AlertDescription>To continue, please enter your password.</AlertDescription>
	<AlertBody>
		<Input autofocus name="password" type="password" aria-label="Password" placeholder="•••••••" />
	</AlertBody>
	<AlertActions>
		<Button plain onclick={() => (isOpen = false)}>Cancel</Button>
		<Button onclick={() => (isOpen = false)}>Continue</Button>
	</AlertActions>
</Alert>