Alert

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CircleCheck } from "@medway-ui/icons";
 
<Alert>
  <AlertContainer>
    <AlertIcon icon={<CircleCheck />} />
    <AlertContent>
      <AlertTitle>Update complete</AlertTitle>
      <AlertDescription>
        Your account was synchronized successfully. No further action is required.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CircleCheck } from "@medway-ui/icons";
 
<Alert variant="emphasis">
  <AlertContainer>
    <AlertIcon icon={<CircleCheck />} />
    <AlertContent>
      <AlertTitle>Update complete</AlertTitle>
      <AlertDescription>
        Your account was synchronized successfully. No further action is required.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CloseCircle } from "@medway-ui/icons";
 
<Alert variant="success">
  <AlertContainer>
    <AlertIcon icon={<CloseCircle />} />
    <AlertContent>
      <AlertTitle>Payment Success</AlertTitle>
      <AlertDescription>
        The selected card was declined. Try again using a different payment method.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CloseCircle } from "@medway-ui/icons";
 
<Alert variant="warning">
  <AlertContainer>
    <AlertIcon icon={<CloseCircle />} />
    <AlertContent>
      <AlertTitle>Payment Attention</AlertTitle>
      <AlertDescription>
        The selected card was declined. Try again using a different payment method.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CloseCircle } from "@medway-ui/icons";
 
<Alert variant="error">
  <AlertContainer>
    <AlertIcon icon={<CloseCircle />} />
    <AlertContent>
      <AlertTitle>Payment failed</AlertTitle>
      <AlertDescription>
        The selected card was declined. Try again using a different payment method.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import { Alert, AlertContainer, AlertContent, AlertIcon, AlertTitle } from "@medway-ui/core";
import { CircleWarning } from "@medway-ui/icons";
 
<Alert className="items-center gap-2">
  <AlertContainer>
    <AlertIcon icon={<CircleWarning />} />
    <AlertContent>
      <AlertTitle>Update complete</AlertTitle>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
} from "@medway-ui/core";
import { CircleCheck } from "@medway-ui/icons";
 
<Alert onClose={() => console.log('Alert closed')}>
  <AlertContainer>
    <AlertIcon icon={<CircleCheck />} />
    <AlertContent>
      <AlertTitle>Update complete</AlertTitle>
      <AlertDescription>
        Your account was synchronized successfully. No further action is required.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
  AlertActions,
  AlertButton,
} from "@medway-ui/core";
import { CircleWarning } from "@medway-ui/icons";
 
<Alert variant="warning">
  <AlertContainer>
    <AlertIcon icon={<CircleWarning />} />
    <AlertContent>
      <AlertTitle>Unsaved changes</AlertTitle>
      <AlertDescription>
        You have unsaved changes that will be lost if you leave this page.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
  <AlertActions>
    <AlertButton variant="basic">Cancel</AlertButton>
    <AlertButton variant="regular">Save changes</AlertButton>
  </AlertActions>
</Alert>

import {
  Alert,
  AlertContainer,
  AlertContent,
  AlertIcon,
  AlertTitle,
  AlertDescription,
  AlertActions,
  AlertButton,
} from "@medway-ui/core";
import { CloseCircle } from "@medway-ui/icons";
 
<Alert variant="error" onClose={() => console.log('Alert closed')}>
  <AlertContainer>
    <AlertIcon icon={<CloseCircle />} />
    <AlertContent>
      <AlertTitle>Payment failed</AlertTitle>
      <AlertDescription>
        The selected card was declined. Try again using a different payment method.
      </AlertDescription>
    </AlertContent>
  </AlertContainer>
  <AlertActions>
    <AlertButton variant="basic">Try again</AlertButton>
    <AlertButton variant="regular">Use different card</AlertButton>
  </AlertActions>
</Alert>