Banner

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

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

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

import { Banner, Button, Flex, Link, toaster } from "@optiaxiom/react";
 
export function App() {
  return (
    <Banner onDismiss={() => {}} w="full">
      <Flex flexDirection={["column", "row"]} justifyContent="space-between">
        You do not have the required permissions to perform this action.
        <Flex flexDirection="row">
          <Link external href="data:,">
            Learn more
          </Link>
          <Button onClick={() => toaster.create("Triggered action")} size="sm">
            Action
          </Button>
        </Flex>
      </Flex>
    </Banner>
  );
}