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

To use the Alert component in your project, import the required component.

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 in theui-svelte offers flexible icon customization to enhance the visual feedback for users. You can choose whether to display an icon and what type of icon should appear based on the alert type.

By default, the Alert component does not display any icon. To enable an icon, simply add the icon attribute to the Alert component. No need to provide a value; just including the icon attribute will automatically display an icon that corresponds to the alert type (e.g., success, error, warning, info).

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

Theme

The Alert component offers two distinct themes to control its overall appearance. These themes help in aligning the alert's style with your application's design requirements.

Available Themes

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

Variant

The Alert component also supports different visual variants to further customize its appearance. 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="light" variant="card">...</Alert>
<Alert theme="light" variant="borderTop">...</Alert>
<Alert theme="light" variant="borderBottom">...</Alert>
<Alert theme="light" variant="borderStart">...</Alert>

Dismissible Alert

The Alert component also includes a dismissible feature, allowing users to close the alert when it's no longer needed. To make an alert dismissible, simply add the dismissible attribute to the Alert component. No need to provide a value; just including the dismissible attribute will automatically add a close button to the alert.

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

Rounded Corners

The rounded prop controls the corner radius of the Alert component, allowing you to adjust its appearance for a more customized look. By setting this prop, you can define how rounded the corners of the Alert should be. The default value is "md", and it accepts the following predefined values: "sm", "md", "lg", "xl", "full", or "none" to suit your design preferences.

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 in theui-svelte allows full customization through the class attribute, giving you control over the styling to match your application's design needs. This flexibility ensures that the alert can seamlessly blend with various UI themes and aesthetics.

Svelte 
<Alert class="bg-gradient-to-r from-red-400 to-yellow-500">...</Alert>

Accessibility

The Alert 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