ノティフィケーションバナー
ウェブサイト全体に関わる、またはページや要素単位における重要度の高い情報を、ユーザーの操作に関わらず、ウェブサイト側からユーザーへ提示する場合に用いる通知バナーです。
import { NotificationBanner } from "@/components/ui/notification-banner";使用例
import { NotificationBanner } from "@/components/ui/notification-banner";
export default function App() {
return (
<NotificationBanner.Root>
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録期間が延長されました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
);
}
カラーチップスタイル
import { NotificationBanner } from "@/components/ui/notification-banner";
export default function App() {
return (
<NotificationBanner.Root type="success" bannerStyle="color-chip">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録期間が延長されました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
);
}
バナータイプ
import { Flex } from "styled-system/jsx";
import { NotificationBanner } from "@/components/ui/notification-banner";
export default function App() {
return (
<Flex gap={8} direction="column">
<NotificationBanner.Root type="info1">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録期間が延長されました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
<NotificationBanner.Root type="info2">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録期間が延長されました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
<NotificationBanner.Root type="success">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録手続きは全て完了しました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
<NotificationBanner.Root type="warning">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
偽SNSアカウントにご注意ください
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
<NotificationBanner.Root type="error">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
操作を完了できませんでした
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
</Flex>
);
}
閉じるボタン
import { useState } from "react";
import { NotificationBanner } from "@/components/ui/notification-banner";
import { Button } from "@/components/ui/button";
export default function App() {
const [read, setRead] = useState(false);
if (read)
return (
<Button variant="text" onClick={() => setRead(false)}>
再表示
</Button>
);
return (
<NotificationBanner.Root type="warning">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
偽SNSアカウントにご注意ください
</NotificationBanner.Heading>
<NotificationBanner.Close onClick={() => setRead(true)}>
閉じる
</NotificationBanner.Close>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
</NotificationBanner.Root>
);
}
アクションボタン
import { NotificationBanner } from "@/components/ui/notification-banner";
import { Button } from "@/components/ui/button";
export default function App() {
return (
<NotificationBanner.Root type="error">
<NotificationBanner.Icon />
<NotificationBanner.Header>
<NotificationBanner.Heading>
登録期間が延長されました
</NotificationBanner.Heading>
</NotificationBanner.Header>
<NotificationBanner.Body>
ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。ダミーテキストは、デザインの作成時に使用される仮の文章です。
</NotificationBanner.Body>
<NotificationBanner.Actions>
<Button variant="outline">キャンセル</Button>
<Button>承認する</Button>
</NotificationBanner.Actions>
</NotificationBanner.Root>
);
}