Alert

Display contextual feedback messages for user actions or system events.

Open in Storybook

Interactive Demo

Alert Title

This is a helpful description of the alert.

Variant: informationwarningsuccessurgent Size: largesmall Position: top-lefttop-centertop-rightbottom-leftbottom-centerbottom-rightcenter Dismissible

Variants

All variants

Information

Alert description text.

Warning

Alert description text.

Success

Alert description text.

Urgent

Alert description text.

With Action

Alert with action button

New update available

Version 2.0 is ready to install.

Usage

<script setup>
import { ref } from 'vue';
import { Alert } from '@yellowcard/b2b-design-system';

const showAlert = ref(true);
</script>

<template>
  <Alert
    v-model="showAlert"
    variant="success"
    title="Transfer complete"
    subtitle="Your funds have been sent successfully."
    :dismissible="true"
    :autoDismiss="true"
    :autoDismissDelay="5000"
  />
</template>

API Reference

Props

Prop	Type	Default	Description
title*	string	—	Alert heading text
subtitle	string	''	Supporting description text
variant	'information' | 'warning' | 'success' | 'urgent'	'information'	Visual style and intent
size	'large' | 'small'	'large'	Alert size
position	'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'center'	'top-right'	Screen position for floating alerts
actionLabel	string	''	Text for optional action button
dismissible	boolean	true	Show close button
autoDismiss	boolean	false	Automatically dismiss after delay
autoDismissDelay	number	5000	Auto-dismiss delay in milliseconds
modelValue	boolean	true	Controls visibility (v-model)

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when visibility changes
dismiss	—	Emitted when alert is dismissed
action	—	Emitted when action button is clicked

Accessibility

• Uses role="alert" with aria-live="polite" for screen reader announcement
• Close button has configurable aria-label (default: "Close alert")
• Focus is managed when alerts appear/disappear