Banner

import {
	Banner,
	Button,
} from "@work-rjkashyap/unified-ui";

<Banner>
  Welcome to Unified UI — the production-ready design system for React.
</Banner>

<Banner variant="info" position="inline">
  This is an inline banner inside a form or card section.
</Banner>

{/* Typically placed at the very top of your layout */}
<Banner variant="warning" position="top" dismissible>
  Scheduled maintenance in 30 minutes — save your work.
</Banner>

<Banner variant="primary" position="bottom" dismissible>
  🍪 We use cookies to improve your experience.{" "}
  <a href="/privacy" className="underline">
    Learn more
  </a>
</Banner>

const [bannerVisible, setBannerVisible] = useState(true);

<Banner
  variant="info"
  visible={bannerVisible}
  onDismiss={() => setBannerVisible(false)}
  dismissible
>
  This banner is controlled externally.
</Banner>;

const [show, setShow] = useState(false);

<Button onClick={() => setShow(true)}>Show Banner</Button>

<Banner
  variant="success"
  defaultVisible={false}
  visible={show}
  dismissible
  onDismiss={() => setShow(false)}
>
  Settings saved successfully.
</Banner>

import { useState, useEffect } from "react";
import { Banner, Button } from "@work-rjkashyap/unified-ui";

function CookieBanner() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const accepted = localStorage.getItem("cookies-accepted");
    if (!accepted) setVisible(true);
  }, []);

  const accept = () => {
    localStorage.setItem("cookies-accepted", "true");
    setVisible(false);
  };

  return (
    <Banner
      variant="default"
      position="bottom"
      visible={visible}
      action={
        <div className="flex gap-2 shrink-0">
          <Button size="sm" variant="secondary" onClick={() => setVisible(false)}>
            Decline
          </Button>
          <Button size="sm" variant="primary" onClick={accept}>
            Accept All
          </Button>
        </div>
      }
    >
      We use cookies to improve your experience and analyze site usage.{" "}
      <a href="/privacy" className="underline font-medium">
        Privacy Policy
      </a>
    </Banner>
  );
}

<Banner
  variant="warning"
  position="top"
  icon={<AlertTriangle className="size-4" />}
  action={
    <a href="/status" className="text-xs underline font-medium shrink-0">
      Status page →
    </a>
  }
  dismissible
>
  Scheduled maintenance window: Sunday Feb 2, 2:00–4:00 AM UTC. Some
  features may be unavailable.
</Banner>