Alert component

The Alert component designed with Vue 3 and Tailwind CSS. possibility to add an Icon and show a Closing button.

Basic Usage

Import and use Alert in your Vue components as follows:

<template>
  <Alert type="warning" title="Some title" />
</template>

<script setup>
import { Alert } from '@robuust-digital/vue-components';
</script>

Some title

Props

Below are the props supported by Alert, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
as	String	div	Defines the element type or component to render.
title	String	''	Sets the text title for the alert.
icon	Object, Function	null	Specifies an icon to display before the title. @heroicons/vue can be used, or you can import your own .svg files.
type	String	info	Sets the alert's type variant. Accepts predefined values (info, warning, danger, success). Learn more about type variants in the next section.
close	Boolean	false	Shows a closing button in the right top corner of the alert when true.

Slots

Below is example to edit the content slot of Alert:

Alert with a content slot

There were 2 errors with your submission

• Your password must be at least 8 characters
• Your password must include at least one pro wrestling finishing move

Show code

<template>
  <Alert type="danger" title="There were 2 errors with your submission">
    <ul>
      <li>Your password must be at least 8 characters</li>
      <li>Your password must include at least one pro wrestling finishing move</li>
    </ul>
  </Alert>
</template>

Type Variants

The type prop supports both predefined and custom values. Default types include:

• info
• warning
• danger
• success

Customization with Tailwind CSS

To customize the alert styles globally, extend your Tailwind configuration. Example:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        alert: {
          '--rvc-alert-padding-x': theme('padding.6'),
          '--rvc-alert-padding-y': theme('padding.6'),
          '--rvc-alert-border-radius': theme('borderRadius.md'),
          '--rvc-alert-font-size': theme('fontSize.base.0'),
          '--rvc-alert-gap': theme('gap[1.5]'),
          '--rvc-alert-anchor-decoration': 'underline',
          '--rvc-alert-icon-size': theme('width.6'),
          '--rvc-alert-title-font-weight': theme('fontWeight.medium'),
          '--rvc-alert-transition-property': theme('transitionProperty.colors'),
          '--rvc-alert-transition-duration': theme('transitionDuration.300'),
          '--rvc-alert-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),
          '--rvc-alert-bg-color': theme('colors.blue.50'),
          '--rvc-alert-color': theme('colors.blue.700'),
          '--rvc-alert-icon-color': theme('colors.blue.400'),
          '--rvc-alert-icon-hover-color': theme('colors.blue.800'),
          '--rvc-alert-title-color': theme('colors.blue.800'),
          '--rvc-alert-close-bg-color': theme('colors.blue.100'),
          '--rvc-alert-close-hover-bg-color': theme('colors.blue.200'),
          '--rvc-alert-anchor-color': 'inherit',
          '--rvc-alert-anchor-hover-color': theme('colors.blue.600'),
        },
      }),
    },
  },
  plugins: [components],
};

Full Tailwind CSS alert component configuration options can be found here.

Examples

Warning Alert

Attention needed

You have no credits left. Upgrade your account to add more credits.

Show code

<template>
  <Alert title="Attention needed" type="warning">
    <p>You have no credits left. <a href="#">Upgrade your account</a> to add more credits.</p>
  </Alert>
</template>

Default Alert with Icon and Close button

A new software update is available.

See what’s new in version 2.0.4.

Show code

<template>
  <Alert v-show="show" title="A new software update is available." :icon="InformationCircleIcon" close @alert:close="show = false">
    <p><a href="#">See what’s new</a> in version 2.0.4.</p>
  </Alert>
</template>

Danger Alert

There were 2 errors with your submission

• Your password must be at least 8 characters
• Your password must include at least one pro wrestling finishing move

Show code

<template>
  <Alert title="There were 2 errors with your submission" type="danger">
    <ul>
      <li>Your password must be at least 8 characters</li>
      <li>Your password must include at least one pro wrestling finishing move</li>
    </ul>
  </Alert>
</template>

Success Alert with a Icon

Order completed

Show code

<Alert title="Order completed" type="success" :icon="CheckCircleIcon" />

Tailwind Config

Full Tailwind CSS alert component configuration options can be found below:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        alert: {
          // Available variables you can override:
          '--rvc-alert-padding-x': theme('padding.6'),
          '--rvc-alert-padding-y': theme('padding.6'),
          '--rvc-alert-border-radius': theme('borderRadius.md'),
          '--rvc-alert-font-size': theme('fontSize.base.0'),
          '--rvc-alert-gap': theme('gap[1.5]'),
          '--rvc-alert-anchor-decoration': 'underline',
          '--rvc-alert-icon-size': theme('width.6'),
          '--rvc-alert-title-font-weight': theme('fontWeight.medium'),
          '--rvc-alert-transition-property': theme('transitionProperty.colors'),
          '--rvc-alert-transition-duration': theme('transitionDuration.300'),
          '--rvc-alert-transition-timing-function': theme('transitionTimingFunction.DEFAULT'),

          // Color variables you can override:
          '--rvc-alert-bg-color': theme('colors.blue.50'),
          '--rvc-alert-color': theme('colors.blue.700'),
          '--rvc-alert-icon-color': theme('colors.blue.400'),
          '--rvc-alert-icon-hover-color': theme('colors.blue.800'),
          '--rvc-alert-title-color': theme('colors.blue.800'),
          '--rvc-alert-close-bg-color': theme('colors.blue.100'),
          '--rvc-alert-close-hover-bg-color': theme('colors.blue.200'),
          '--rvc-alert-anchor-color': 'inherit',
          '--rvc-alert-anchor-hover-color': theme('colors.blue.600'),

          // You can customize color variants like this:
          danger: {
            '--rvc-alert-bg-color': theme('colors.red.500'),
          },

          success: {
            '--rvc-alert-bg-color': theme('colors.green.500'),
          },

          // Also you can customize elements with CSS
          '.alert-close': {
            position: 'relative',

            // or
            '@apply relative': {},
          },

          // ...
        },
      }),
    },
  },
  plugins: [components],
};