Alert

import { Alert } from '@saas-ui/react'

export const AlertBasic = () => {
  return <Alert status="info" title="This is the alert title" />
}

import { Alert } from '@saas-ui/react'

export const AlertWithDescription = () => {
  return (
    <Alert status="error" title="Invalid Fields">
      Your form has some errors. Please fix them and try again.
    </Alert>
  )
}

import { Stack } from '@chakra-ui/react'
import { Alert } from '@saas-ui/react'

export const AlertWithStatus = () => {
  return (
    <Stack gap="2" width="full">
      <Alert
        status="error"
        title="There was an error processing your request"
      />
      <Alert
        status="info"
        title="Chakra is going live on August 30th. Get ready!"
      />
      <Alert
        status="warning"
        title="Seems your account is about expire, upgrade now"
      />
      <Alert status="success" title="Data uploaded to the server. Fire on!" />
    </Stack>
  )
}

import { Stack } from '@chakra-ui/react'
import { Alert } from '@saas-ui/react'

export const AlertWithVariants = () => {
  return (
    <Stack gap="3">
      <Alert
        status="success"
        variant="subtle"
        title="Data uploaded to the server. Fire on!"
      />

      <Alert
        status="success"
        variant="solid"
        title="Data uploaded to the server. Fire on!"
      />

      <Alert
        status="success"
        variant="surface"
        title="Data uploaded to the server. Fire on!"
      />

      <Alert
        status="success"
        variant="outline"
        title="Data uploaded to the server. Fire on!"
      />
    </Stack>
  )
}

import { Alert } from '@saas-ui/react'
import { LuAlarmClockPlus } from 'react-icons/lu'

export const AlertWithCustomIcon = () => {
  return (
    <Alert
      icon={<LuAlarmClockPlus />}
      status="warning"
      title="Submitting this form will delete your account"
    />
  )
}