Alert

The Alert component displays important messages with different severity levels.

Demo

React

StatusNeutralInfoSuccessWarningDanger

VariantSolidSubtleOutline

SizeSmallMediumLarge

Good morning!

Your cup of coffee is ready.

Vue

StatusNeutralInfoSuccessWarningDanger

SizeSmallMediumLarge

VariantSolidSubtleOutline

Good morning!

Your cup of coffee is ready.

Example

React

import { Alert } from '@fintech-sandpit/ui/react';
import { faCupHot, faInfoCircle } from '@fortawesome/free-solid-svg-icons';

return (
  <Alert
    icon={faCupHot}
    status="info"
    size="md"
    variant="solid"
  >
    <p>
      <strong>Good morning!</strong>
    </p>

    <p>Your cup of coffee is ready.</p>
  </Alert>
);

Vue

<script setup lang="ts">
import { Alert } from '@fintech-sandpit/ui/vue';
import { faCupHot, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Alert
    :icon="faCupHot"
    status="info"
    size="md"
    variant="solid"
  >
    <p>
      <strong>Good morning!</strong>
    </p>
    <p>Your cup of coffee is ready.</p>
  </Alert>
</template>

Props

Name	Type	Default	Description
icon	IconDefinition 1		Custom icon 2
size	AlertSize	md	Alert size
status	AlertStatus	info	Alert type
variant	AlertVariant	solid	Alert variant styling

1. See Icons for the list of available icon definitions.
2. If no icon is provided, the icon will be auto-selected based on the status prop.

Types

type AlertSize = 'sm' | 'md' | 'lg'
type AlertStatus = 'info' | 'success' | 'warning' | 'danger'
type AlertVariant = 'solid' | 'subtle' | 'outline'