@fvc/alert

@fvc/alert provides FE-VIS styled alert primitives on top of Ant Design Alert. It keeps the Ant Design Alert API familiar while adding automatic type-based icon selection, size variants, full-width layout, and custom icon colour control.

Installation

bun add @fvc/alert

Peer Dependencies

bun add react antd @fvc/icons

Import

import { Alert } from '@fvc/alert';

Quick Start

import { Alert } from '@fvc/alert';

export function SaveSuccess() {
  return <Alert type="success" message="Record saved successfully" />;
}

Variants

| Type | Use case | | --- | --- | | 'info' | General information — gray background. | | 'success' | Successful operation — green background. | | 'warning' | Attention required — orange background. | | 'error' | Critical error — red background. |

Common Usage

Types

<Alert type="info" message="Your session expires in 10 minutes" />
<Alert type="success" message="Record saved successfully" />
<Alert type="warning" message="This action cannot be undone" />
<Alert type="error" message="Failed to load data. Please try again" />

Sizes

<Alert type="info" message="Medium alert (default)" size="medium" />
<Alert type="info" message="Small alert" size="small" />

With Icon

Icons are shown automatically per type. Use showIcon to enable them.

<Alert type="warning" message="Please review before submitting" showIcon />

Custom Icon

import { Lock } from '@fvc/icons';

<Alert type="info" message="Authentication required" icon={<Lock />} showIcon />

Closable

<Alert type="info" message="New version available" closable />

Full Width

<Alert type="error" message="Service unavailable" block />

Props

| Prop | Type | Description | | --- | --- | --- | | type | 'info' \| 'success' \| 'warning' \| 'error' | Alert variant. Controls icon and background colour. | | message | ReactNode | Main alert message. | | size | 'medium' \| 'small' | Alert size. Defaults to 'medium'. | | block | boolean | Stretches the alert to full container width. | | icon | ReactNode | Custom icon, overrides the type-based default. | | iconColor | CSSProperties['color'] | Colour applied to the icon. | | showIcon | boolean | Show the icon. | | closable | boolean | Show a close button. | | testId | string | Maps to data-testid. | | All AlertProps | — | All Ant Design Alert props except description and banner which are not supported. |

Consumer Example

import { Alert } from '@fvc/alert';

export function FormFeedback({ status, message }) {
  if (!message) return null;

  return (
    <Alert
      type={status}
      message={message}
      size="small"
      block
      showIcon
      closable
      testId="form-feedback"
    />
  );
}

Testing

<Alert type="error" message="Not found" testId="error-alert" />

screen.getByTestId('error-alert');

Customisation

@fvc/alert exposes its visual tokens as CSS custom properties declared in src/styles/variables.scss. Override any of these in your own stylesheet — no fork, no file in the component, no re-bundle required.

/* consumer's own app stylesheet */
:root {
  --alert-info-bg-color: #e8f4fd;
  --alert-success-bg-color: #2e7d32;
  --alert-warning-bg-color: #f57c00;
  --alert-error-bg-color: #b71c1c;
  --alert-border-radius: 4px;
}

Available variables

| Variable | Default | Controls | | --- | --- | --- | | --alert-default-width | 336px | Width of the alert container | | --alert-default-padding | 16px | Padding of the alert container | | --alert-default-gap | 16px | Gap between the icon and the message in the default size | | --alert-border-radius | 8px | Corner radius of the alert container | | --alert-small-padding | 8px 16px 8px 8px | Padding of the alert container in the small size | | --alert-small-gap | 8px | Gap between the icon and the message in the small size | | --alert-small-icon-size | 20px | Width and height of the icon in the small size | | --alert-message-ff | Roboto, Arial, sans-serif | Font family of the alert message text | | --alert-message-fw | 400 | Font weight of the alert message text | | --alert-message-fz | 16px | Font size of the alert message text in the default size | | --alert-message-lh | 20px | Line height of the alert message text in the default size | | --alert-small-message-fz | 14px | Font size of the alert message text in the small size | | --alert-small-message-lh | 16px | Line height of the alert message text in the small size | | --alert-info-bg-color | var(--gray-50) | Background color of the info variant | | --alert-info-message-color | var(--body-text-color-1000) | Message text color of the info variant | | --alert-success-bg-color | var(--green-700) | Background color of the success variant | | --alert-success-message-color | var(--white-text-color-0) | Message text color of the success variant | | --alert-warning-bg-color | var(--orange-200) | Background color of the warning variant | | --alert-warning-message-color | var(--body-text-color-1000) | Message text color of the warning variant | | --alert-error-bg-color | var(--red-800) | Background color of the error variant | | --alert-error-message-color | var(--white-text-color-0) | Message text color of the error variant | | --alert-close-icon-size | 16px | Width and height of the close button container | | --alert-close-bg-color | var(--blue-gray-900) | Background color of the close button | | --alert-close-inner-size | 7px | Width and height of the close button inner icon | | --alert-close-icon-color | var(--white-text-color-0) | Color of the close button SVG icon |

Development

bun run lint
bun run type-check
bun run test
bun run build