Windi UI

Appearance

On this page

Alert ​

Alerts serve as a means to convey the status of an application or system.

Basic usage ​

You can pass a title as a prop to the WAlert component by using the title prop as shown below:

In addition to that, you can pass the alert description by using the WAlertDescription component as shown below:

Variants ​

The WAlert component comes with 5 different variants such as default, primary, success, warning, and danger as demonstrated below:

Theme ​

The WAlert component comes with various themes such as light, outline and dashed as demonstrated below:

Light ​

You can set the light theme to the variants as shown below:

Outline ​

You can set the outline theme to the variants as shown below:

Dashed ​

You can set the dashed theme to the variants as shown below:

Closable ​

You can set the closable prop and an event to close the alert as shown below:

In the example above, the WAlert component has a closable prop, which allows you to display a close button on the WAlert component . When the close button is clicked, it emits a close event. You can handle this event by defining your own method inorder to close the WAlert component.

Transitions ​

You can set the transition of the WAlert component when it is dismissed as shown below:

Windi UI offers four transition modes as of Windi UI version v0.0.1, namely: slideRight, slideLeft, fade, and scale.

By default, the WAlert component's transition is slideRight.

Icons ​

You can set the icons of the WAlert component either at the beginning (leading) or at the end (trailing).

Leading ​

Trailing ​

You can set the icon as trailing by setting the trailing prop to true as show below:

If you need both the leading and trailing icons, you can use the leading and trailing slot respectively as shown below:

Avatar ​

You can use the WAvatar component with the WAlert component as shown below:

Custom ​

You can also create a custom alert component as demonstrated below:

Preset ​

js
WAlert: {
    base: {
      root: 'w-full relative overflow-hidden rounded-md px-3 py-2.5',
      alertTitle: 'text-lg font-semibold',
      alertFlexBetween: 'flex justify-between items-center w-full',
      alertBody: 'text-sm leading-none mt-2.5',
      alertCloseIcon: 'w-6 h-6 block',
      alertIsLeading: 'space-x-1',
      alertIconIsLeading: 'pr-1.5',
      alertIsNotLeading: 'space-x-2',
      alertCloseButtonClass: 'p-0.5 rounded-md -m-1 block transition duration-200 ease-in',
    },
    variants: {
      'default': {
        root: 'bg-yellow-500 text-white w-full',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-yellow-800',
      },
      'default-light': {
        root: [
          'border border-yellow-500 bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-500 hover:bg-yellow-800 hover:text-white duration-200 ease-in dark:hover:bg-yellow-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-yellow-900 !active:text-white',
      },
      'default-dashed': {
        root: [
          'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
      },
      'default-outline': {
        root: [
          'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
      },
      'primary': {
        root: 'bg-blue-500 text-white',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-blue-800',
      },
      'primary-light': {
        root: [
          'border border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-500 hover:bg-blue-800 hover:text-white duration-200 ease-in dark:hover:bg-blue-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-blue-900 !active:text-white',
      },

      'primary-outline': {
        root: [
          'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
      },

      'primary-dashed': {
        root: [
          'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
      },
      'success': {
        root: 'bg-green-500 text-white',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-green-800',
      },

      'success-light': {
        root: [
          'border border-green-500 bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-[#0CC57D] hover:bg-green-800 hover:text-white duration-200 ease-in dark:hover:bg-green-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },

      'success-outline': {
        root: [
          'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },

      'success-dashed': {
        root: [
          'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },
      'warning': {
        root: 'bg-orange-500 text-white',
        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-orange-800',
      },
      'warning-light': {
        root: [
          'border border-orange-500 bg-orange-100 text-orange-800 dark:bg-[#362C1E] dark:text-[#F5A525] hover:bg-orange-800 hover:text-white duration-200 ease-in dark:hover:bg-orange-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'warning-outline': {
        root: [
          'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'warning-dashed': {
        root: [
          'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'danger': {
        root: 'bg-red-500 text-white',
        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-red-800',
      },
      'danger-light': {
        root: [
          'border border-red-500 bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-500 hover:bg-red-800 dark:hover:bg-red-800 dark:hover:text-white hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
      'danger-outline': {
        root: [
          'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
      'danger-dashed': {
        root: [
          'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
    },
  },
WAlert: {
    base: {
      root: 'w-full relative overflow-hidden rounded-md px-3 py-2.5',
      alertTitle: 'text-lg font-semibold',
      alertFlexBetween: 'flex justify-between items-center w-full',
      alertBody: 'text-sm leading-none mt-2.5',
      alertCloseIcon: 'w-6 h-6 block',
      alertIsLeading: 'space-x-1',
      alertIconIsLeading: 'pr-1.5',
      alertIsNotLeading: 'space-x-2',
      alertCloseButtonClass: 'p-0.5 rounded-md -m-1 block transition duration-200 ease-in',
    },
    variants: {
      'default': {
        root: 'bg-yellow-500 text-white w-full',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-yellow-800',
      },
      'default-light': {
        root: [
          'border border-yellow-500 bg-yellow-100 text-yellow-800 dark:bg-yellow-500/20 dark:text-yellow-500 hover:bg-yellow-800 hover:text-white duration-200 ease-in dark:hover:bg-yellow-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-yellow-900 !active:text-white',
      },
      'default-dashed': {
        root: [
          'border border-dashed border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
      },
      'default-outline': {
        root: [
          'border border-yellow-500 text-yellow-800 hover:bg-yellow-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-yellow-900',
      },
      'primary': {
        root: 'bg-blue-500 text-white',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-blue-800',
      },
      'primary-light': {
        root: [
          'border border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-500/20 dark:text-blue-500 hover:bg-blue-800 hover:text-white duration-200 ease-in dark:hover:bg-blue-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: 'hover:text-white py-1 px-1 hover:bg-blue-900 !active:text-white',
      },

      'primary-outline': {
        root: [
          'border border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
      },

      'primary-dashed': {
        root: [
          'border border-dashed border-blue-500 text-blue-800 hover:bg-blue-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-blue-900',
      },
      'success': {
        root: 'bg-green-500 text-white',
        alertCloseButtonClass: 'text-white py-1 px-1 hover:bg-green-800',
      },

      'success-light': {
        root: [
          'border border-green-500 bg-green-100 text-green-800 dark:bg-green-500/20 dark:text-[#0CC57D] hover:bg-green-800 hover:text-white duration-200 ease-in dark:hover:bg-green-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },

      'success-outline': {
        root: [
          'border border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },

      'success-dashed': {
        root: [
          'border border-dashed border-green-500 text-green-800 hover:bg-green-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-green-900',
      },
      'warning': {
        root: 'bg-orange-500 text-white',
        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-orange-800',
      },
      'warning-light': {
        root: [
          'border border-orange-500 bg-orange-100 text-orange-800 dark:bg-[#362C1E] dark:text-[#F5A525] hover:bg-orange-800 hover:text-white duration-200 ease-in dark:hover:bg-orange-800 dark:hover:text-white',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'warning-outline': {
        root: [
          'border border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'warning-dashed': {
        root: [
          'border border-dashed border-orange-500 text-orange-800 hover:bg-orange-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-orange-900',
      },
      'danger': {
        root: 'bg-red-500 text-white',
        alertCloseButtonClass: 'text-white hover:text-white py-1 px-1 hover:bg-red-800',
      },
      'danger-light': {
        root: [
          'border border-red-500 bg-red-100 text-red-800 dark:bg-red-500/20 dark:text-red-500 hover:bg-red-800 dark:hover:bg-red-800 dark:hover:text-white hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
      'danger-outline': {
        root: [
          'border border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
      'danger-dashed': {
        root: [
          'border border-dashed border-red-500 text-red-800 hover:bg-red-800 hover:text-white duration-200 ease-in',
        ],
        alertCloseButtonClass: '!active:text-white hover:text-white py-1 px-1 hover:bg-red-900',
      },
    },
  },

Released under the MIT License.

Copyright © 2023-PRESENT Selemon Brahanu