Alert

Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond.

Alert neutral

Simple version of alert that has neutral grey color.

<template>
  <div
    role="alert"
    class="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
  >
    <p class="py-2">Happy shopping!</p>
  </div>
</template>

Alert positive

Green color indicates that an action went successful.

<template>
  <div
    role="alert"
    class="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
  >
    <SfIconCheckCircle class="my-2 mr-2 text-positive-700 shrink-0" />
    <p class="py-2 mr-2">The product has been added to the cart.</p>
    <button
      type="button"
      class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
      aria-label="Close positive alert"
    >
      <SfIconClose class="hidden md:block" />
      <SfIconClose size="sm" class="block md:hidden" />
    </button>
  </div>
</template>

<script lang="ts" setup>
import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/vue';
</script>

Alert secondary

This type is informative just like neutral except that its palette is more noticeable.

<template>
  <div
    role="alert"
    class="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
  >
    <SfIconInfo class="mr-2 text-secondary-700 shrink-0" />
    <p class="py-2">Your cart will soon be full.</p>
  </div>
</template>

<script lang="ts" setup>
import { SfIconInfo } from '@storefront-ui/vue';
</script>

Alert warning

Alert can be more descriptive and its content can be splitted into title and description.

<template>
  <div
    role="alert"
    class="flex items-start bg-warning-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
  >
    <SfIconWarning class="mt-2 mr-2 text-warning-700 shrink-0" />
    <div class="py-2 mr-2">
      <p class="font-medium typography-text-base md:typography-text-lg">Your account</p>
      <p>Your shipping details need to be updated.</p>
    </div>
    <button
      type="button"
      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
    >
      Update
    </button>
  </div>
</template>

<script lang="ts" setup>
import { SfIconWarning } from '@storefront-ui/vue';
</script>

Alert error

This type is usually used for information displayed when an important problem occurs.

<template>
  <div
    role="alert"
    class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
  >
    <p class="py-2 mr-2">The password change was failed.</p>
    <button
      type="button"
      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
    >
      Retry
    </button>
    <button
      type="button"
      class="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
      aria-label="Close error alert"
    >
      <SfIconClose class="hidden md:block" />
      <SfIconClose size="sm" class="block md:hidden" />
    </button>
  </div>
</template>
<script lang="ts" setup>
import { SfIconClose } from '@storefront-ui/vue';
</script>