Robuust Vue Components

Appearance

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:

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

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

Props ​

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

PropTypeDefaultDescription
asStringdivDefines the element type or component to render.
titleString''Sets the text title for the alert.
iconObject, FunctionnullSpecifies an icon to display before the title. @heroicons/vue can be used, or you can import your own .svg files.
typeStringinfoSets the alert's type variant. Accepts predefined values (info, warning, danger, success). Learn more about type variants in the next section.
closeBooleanfalseShows 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
vue
<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

Examples ​

Warning Alert ​

Attention needed

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

Show code
vue
<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
vue
<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
vue
<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
vue
<Alert title="Order completed" type="success" :icon="CheckCircleIcon" />

CSS Customization ⚡️ ​

To customize the alert styles global

css
:root {
  /* Base Alert variables */
  --rvc-alert-border-radius: var(--rvc-base-border-radius);
  --rvc-alert-transition-duration: var(--rvc-base-transition-duration);
  --rvc-alert-transition-timing-function: var(--rvc-base-transition-timing-function);
  --rvc-alert-padding-x: calc(var(--spacing) * 6);
  --rvc-alert-padding-y: calc(var(--spacing) * 6);
  --rvc-alert-font-size: var(--text-base);
  --rvc-alert-gap: calc(var(--spacing) * 1.5);
  --rvc-alert-anchor-decoration: underline;
  --rvc-alert-icon-size: calc(var(--spacing) * 6);
  --rvc-alert-title-font-weight: var(--font-weight-medium);
  --rvc-alert-transition-property: color, background-color, border-color;
  --rvc-alert-close-icon-size: calc(var(--spacing) * 5);

  /* Default color variables */
  --rvc-alert-bg-color: var(--color-blue-50);
  --rvc-alert-color: var(--color-blue-700);
  --rvc-alert-icon-color: var(--color-blue-400);
  --rvc-alert-icon-color-hover: var(--color-blue-800);
  --rvc-alert-title-color: var(--color-blue-800);
  --rvc-alert-close-bg-color: var(--color-blue-100);
  --rvc-alert-close-bg-color-hover: var(--color-blue-200);
  --rvc-alert-anchor-color: inherit;
  --rvc-alert-anchor-color-hover: var(--color-blue-600);

  /* Warning variant */
  --rvc-alert-bg-color-warning: var(--color-yellow-50);
  --rvc-alert-color-warning: var(--color-yellow-700);
  --rvc-alert-icon-color-warning: var(--color-yellow-400);
  --rvc-alert-icon-color-warning-hover: var(--color-yellow-800);
  --rvc-alert-title-color-warning: var(--color-yellow-800);
  --rvc-alert-close-bg-color-warning: var(--color-yellow-100);
  --rvc-alert-close-bg-color-warning-hover: var(--color-yellow-200);
  --rvc-alert-anchor-color-warning-hover: var(--color-yellow-600);

  /* Success variant */
  --rvc-alert-bg-color-success: var(--color-green-50);
  --rvc-alert-color-success: var(--color-green-700);
  --rvc-alert-icon-color-success: var(--color-green-400);
  --rvc-alert-icon-color-success-hover: var(--color-green-800);
  --rvc-alert-title-color-success: var(--color-green-800);
  --rvc-alert-close-bg-color-success: var(--color-green-100);
  --rvc-alert-close-bg-color-success-hover: var(--color-green-200);
  --rvc-alert-anchor-color-success-hover: var(--color-green-600);

  /* Danger variant */
  --rvc-alert-bg-color-danger: var(--color-red-50);
  --rvc-alert-color-danger: var(--color-red-700);
  --rvc-alert-icon-color-danger: var(--color-red-400);
  --rvc-alert-icon-color-danger-hover: var(--color-red-800);
  --rvc-alert-title-color-danger: var(--color-red-800);
  --rvc-alert-close-bg-color-danger: var(--color-red-100);
  --rvc-alert-close-bg-color-danger-hover: var(--color-red-200);
  --rvc-alert-anchor-color-danger-hover: var(--color-red-600);
}

/* Or customize the class with CSS props (not recommended) */
.rvc-alert .rvc-alert-close {
  @apply p-3;
}