Alert

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

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

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