Alert

Displays a callout for user attention with contextual feedback messages for typical user actions.

Anatomy

<script>
  import { Alert } from "@saas-ui/svelte/components/alert";
</script>

<Alert status="info" title="Information">
  This is an informational alert message.
</Alert>

<Alert status="success" title="Success">
  Your changes have been saved successfully.
</Alert>

<Alert status="warning" title="Warning">
  Please review your input before continuing.
</Alert>

<Alert status="error" title="Error">
  An error occurred while processing your request.
</Alert>

Examples

Basic Accessibility

Basic alert with default styling and title.

<Alert status="info" variant="subtle" title="This is the alert title" />

Colours Accessibility

Use the colour prop to change the colour scheme. Supports all standard colour palettes.

<VStack gap={4} class="w-full">
	{#each colours as colour}
		<HStack gap={4} class="w-full items-center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Alert
				{colour}
				variant="subtle"
				title="Alert with {colour} colour"
				class="flex-1"
			/>
		</HStack>
	{/each}
</VStack>

Custom Icon Accessibility

Use the icon prop to provide a custom icon component instead of the default status icon.

<Alert
	status="warning"
	title="Submitting this form will delete your account"
	icon={Alarm}
/>

Description Accessibility

Alert with additional description text as children content.

<Alert status="error" title="Invalid Fields">
	Your form has some errors. Please fix them and try again.
</Alert>

Status Accessibility

Use the status prop to change the alert status. Available statuses: error, info, warning, success, neutral.

<Stack gap={2} class="w-full">
	<Alert
		status="error"
		title="There was an error processing your request"
	/>
	<Alert
		status="info"
		title="Chakra is going live on August 30th. Get ready!"
	/>
	<Alert
		status="warning"
		title="Seems your account is about expire, upgrade now"
	/>
	<Alert status="success" title="Data uploaded to the server. Fire on!" />
</Stack>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: subtle, solid, surface, outline.

<Stack gap={3} class="w-full">
	<Alert
		status="success"
		variant="subtle"
		title="Data uploaded to the server. Fire on!"
	/>
	<Alert
		status="success"
		variant="solid"
		title="Data uploaded to the server. Fire on!"
	/>
	<Alert
		status="success"
		variant="surface"
		title="Data uploaded to the server. Fire on!"
	/>
	<Alert
		status="success"
		variant="outline"
		title="Data uploaded to the server. Fire on!"
	/>
</Stack>

Props

Prop	Type	Default	Description
`status`	`info \| success \| warning \| error \| neutral`	`info`	The status of the alert.
`variant`	`subtle \| solid \| surface \| outline`	`subtle`	The visual style of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`title`	`text`	-	The title of the alert.
`icon`	`boolean`	-	The icon to display.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.