Alert

import { Alert } from "@nexera-ui/react";

const tones = ["info", "success", "warning", "danger", "neutral"] as const;

export function Tones() {
  return (
    <div className="flex flex-col gap-4">
      {tones.map((tone) => (
        <Alert
          key={tone}
          title="Leave policy updated"
          description="Review the changes before your next request."
          tone={tone}
          politeness="polite"
        />
      ))}
    </div>
  );
}

import { useState } from "react";
import { Alert, Button } from "@nexera-ui/react";

export function Dismissible() {
  const [visible, setVisible] = useState(false);
  return (
    <div className="flex flex-col items-start gap-4">
      <Button
        id="save-policy"
        onPress={() => {
          setVisible(true);
        }}
      >
        Save policy
      </Button>
      {visible ? (
        <Alert
          tone="success"
          title="Leave policy updated"
          description="Employees see the new rules from tomorrow."
          onDismiss={() => {
            setVisible(false);
            document.getElementById("save-policy")?.focus();
          }}
        />
      ) : null}
    </div>
  );
}

import { Alert, Button } from "@nexera-ui/react";

<Alert
  title="Your leave request for the whole of next quarter is waiting for approval from two managers"
  description="We will email you as soon as both managers have answered. You can still edit or withdraw the request until then."
  tone="warning"
  actions={
    <>
      <Button variant="ghost" size="sm">
        Edit request
      </Button>
      <Button variant="ghost" size="sm">
        Withdraw request
      </Button>
    </>
  }
  onDismiss={() => undefined}
/>;

import { Alert } from "@nexera-ui/react";

<Alert
  title="تم تحديث سياسة الإجازات"
  description="راجع التغييرات قبل طلبك التالي."
  iconLabel="معلومة"
  onDismiss={() => undefined}
  dismissLabel="إغلاق"
/>;