Banner

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

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

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