Alert

The Alert component displays important messages with different severity levels.

Demo

React
Vue

Status

Variant

Size

Good morning!

Your cup of coffee is ready.

Example

React
Vue

// Import components
import {
  Alert,
  Icon,
} from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/alert.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faCupHot } from '@fortawesome/free-solid-svg-icons';

return (
  <Alert
    status="info"
    size="md"
    variant="solid"
  >
    <Icon as={faCupHot} />

    <div className="space-y-1">
      <p className="font-bold">
        Good morning!
      </p>

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

<script setup lang="ts">
import { Alert } from '@fintech-sandpit/ui/vue';
import { Icon } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/alert.css';
import '@fintech-sandpit/ui/style/components/icon.css';
// Import icon
import { faCupHot } from '@fortawesome/free-solid-svg-icons';
</script>

<template>
  <Alert
    status="info"
    size="md"
    variant="solid"
  >
    <Icon :as="faCupHot" />

    <div class="space-y-1">
      <p class="font-bold">
        Good morning!
      </p>

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

Props

React
Vue

Name	Type	Default	Description
`size`	`AlertSize`	`md`	Alert size
`status`	`AlertStatus`	`info`	Alert type
`variant`	`AlertVariant`	`solid`	Alert variant styling
`noIcon`	`boolean`	`false`	Hide the icon

Name	Type	Default	Description
`size`	`AlertSize`	`md`	Alert size
`status`	`AlertStatus`	`info`	Alert type
`variant`	`AlertVariant`	`solid`	Alert variant styling
`no-icon`	`boolean`	`false`	Hide the icon

Types

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