Banner

화면 위쪽에 정보나 위험을 알리는 띠입니다.

@horon-ai/react 표시 Storybook ↗

Preview

Inbox Manager needs your yes on 2 drafts.

Couldn't reach Gmail. Reconnect to keep Inbox Manager running.

Usage

tsx

import { Banner } from "@horon-ai/react";

export default function BannerDemo() {
  return (
    <>
      <Banner className="w-full max-w-160" action={<button type="button">Review</button>}>
        Inbox Manager needs your yes on 2 drafts.
      </Banner>
      <Banner className="w-full max-w-160" tone="danger" action={<button type="button">Reconnect</button>}>
        Couldn&apos;t reach Gmail. Reconnect to keep Inbox Manager running.
      </Banner>
    </>
  );
}