Alert

import {
  Alert,
  AlertDescription,
  AlertTitle,
  Link,
  Text,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Alert>
      <AlertTitle>Some action is not permitted</AlertTitle>
      <AlertDescription>
        <Text>
          You do not have the required permissions to perform this action.
        </Text>
 
        <Text>
          <Link href="data:,">Request access</Link>
        </Text>
      </AlertDescription>
    </Alert>
  );
}

import type { ComponentPropsWithoutRef } from "react";
 
import { Alert, AlertDescription, AlertTitle } from "@optiaxiom/react";
 
export function App({
  colorScheme,
}: Pick<ComponentPropsWithoutRef<typeof Alert>, "colorScheme">) {
  return (
    <Alert colorScheme={colorScheme}>
      <AlertTitle>Alert title</AlertTitle>
      <AlertDescription>Description of the alert message</AlertDescription>
    </Alert>
  );
}

import { Alert, AlertDescription, AlertTitle, Button } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [open, setOpen] = useState(true);
 
  return (
    <>
      {open && (
        <Alert onClose={() => setOpen(false)}>
          <AlertTitle>Some action is not permitted</AlertTitle>
          <AlertDescription>
            You do not have the required permissions to perform this action.
          </AlertDescription>
        </Alert>
      )}
 
      {!open && <Button onClick={() => setOpen(true)}>Show alert</Button>}
    </>
  );
}