Alert

The Alert component displays feedback or contextual messages to your users. Using the Alert component, you can provide various types of feedback such as success, error, warning, or general information.

Example

Import the Alert component to use it in your project. There are 4 types of alert you can create using the type prop. The default type is error. Other types are 'info', 'success' and 'warning'. Here are some examples:

Svelte 
<script>
  import { Alert } from "theui-svelte";
</script>

<Alert>I'm error (default) alert!</Alert>
<Alert type="info">I'm info alert!</Alert>
<Alert type="success">I'm success alert!</Alert>
<Alert type="warning">I'm warning alert!</Alert>

Icon

The Alert component supports predefined icons for each alert type for for better visual feedback. By default, no icon is shown. Simply add the icon attribute to display an icon matching the alert type (success, error, warning, or info). No value needed - it auto-selects the appropriate icon.

Svelte 
<Alert icon>...</Alert>
<Alert icon type="info">...</Alert>
<Alert icon type="success">...</Alert>
<Alert icon type="warning">...</Alert>

Theme

Use the theme prop to switch between two Alert styles that complement your design system.

Available Themes

  • default: This is the standard theme, offering a balanced look suitable for most use cases.
  • soft: A lighter variant that provides a more subtle and softer appearance.
Svelte 
<Alert theme="default">...</Alert>
<Alert theme="soft">...</Alert>

Variant

The Alert component also supports different visual variants to further customize its appearance using the variant prop. These variants determine the structural style of the alert.

Available Variants

  • card: Displays the alert as a card with defined borders and padding.
  • borderTop: Highlights the alert with a border at the top.
  • borderBottom: Adds a border at the bottom of the alert.
  • borderStart: Features a border on the starting side (left in LTR, right in RTL).
Svelte 
<Alert theme="soft" variant="card">...</Alert>
<Alert theme="soft" variant="borderTop">...</Alert>
<Alert theme="soft" variant="borderBottom">...</Alert>
<Alert theme="soft" variant="borderStart">...</Alert>

Dismissible Alert

You can close alerts with a click - just add the dismissible attribute. The component handles the rest, adding a close button automatically.

Svelte 
<Alert dismissible>...</Alert>

Rounded Corners

You can adjust the alert's corners using the rounded prop to tweak the border radius. Choose from preset sizes like "sm", "md" (default), "lg", "xl", "full", or "none" for a polished look.

Svelte 
<Alert rounded="none"> ... </Alert>
<Alert rounded="sm"> ... </Alert>
<Alert rounded="md"> ... </Alert>
<Alert rounded="lg"> ... </Alert>
<Alert rounded="xl"> ... </Alert>
<Alert rounded="full"> ... </Alert>

Customization

The Alert component provides full styling control through its class attribute, letting you customize every detail to match your app’s design. Whether tweaking colors or overhauling layouts, this flexibility ensures alerts blend seamlessly with your UI while maintaining brand consistency.

Svelte 
<Alert class="bg-gradient-to-r from-red-200 dark:from-red-800 to-yellow-400 dark:to-yellow-500 text-default">
  I'm custom styled alert message!
</Alert>

Accessibility

Designed for screen readers from the ground up, the component is built with accessibility in mind, handling all necessary ARIA attributes, including role="alert" and aria-label="Close alert", to ensure compatibility with assistive technologies. These attributes are automatically applied, so you don't need to configure them manually.

The only consideration required is maintaining proper color contrast for the alert's text and background to ensure readability and compliance with accessibility standards.

Configuration