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>