Alert

The Alert component displays important messages with different severity levels.

Demo

React
Vue

Size

Variant

Good morning!

Your cup of coffee is ready.

Hey!

Please note our holiday hours.

Success!

Your payment was processed successfully. Thank you!

Heads up!

Your password will expire in 3 days. Consider updating it now.

Error!

Unable to connect to the server. Please try again later or contact support.

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

return (
  <Alert icon={faCupHot}>
    <p>
      <strong>Good morning!</strong>
    </p>

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

  <Alert status="success">
    <p>
      <strong>Success!</strong>
    </p>

    <p>Your payment was processed successfully. Thank you!</p>
  </Alert>

  <Alert status="warning">
    <p>
      <strong>Heads up!</strong>
    </p>

    <p>Your password will expire in 3 days. Consider updating it now.</p>
  </Alert>

  <Alert status="danger">
    <p>
      <strong>Error!</strong>
    </p>

    <p>Unable to connect to the server. Please try again later or contact support.</p>
  </Alert>
);

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

<template>
  <Alert icon={faCupHot}>
    <p>
      <strong>Good morning!</strong>
    </p>

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

  <Alert status="success">
    <p>
      <strong>Success!</strong>
    </p>

    <p>Your payment was processed successfully. Thank you!</p>
  </Alert>

  <Alert status="warning">
    <p>
      <strong>Heads up!</strong>
    </p>

    <p>Your password will expire in 3 days. Consider updating it now.</p>
  </Alert>

  <Alert status="danger">
    <p>
      <strong>Error!</strong>
    </p>

    <p>Unable to connect to the server. Please try again later or contact support.</p>
  </Alert>
</template>

Props

Name	Type	Default	Description
`icon`	`IconDefinition` ¹		Custom icon ²
`size`	`AlertSize`	`md`	Alert size
`status`	`AlertStatus`	`info`	Alert type
`variant`	`AlertVariant`	`solid`	Alert variant styling

See Icons for the list of available icon definitions.
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'