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", "2xl", "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 class attribute goes straight onto the alert and is merged with tailwind-merge, so your own colors, spacing and layout classes win over the defaults.

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>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <div>.

Accessibility

The Alert sets its own ARIA attributes, including role="alert" and aria-label="Close alert" on the dismiss button, so there is nothing to configure. For non-critical messages, you can change the role using the role prop, e.g. role="status".

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