安全バナーSafetyBannerExperimental
Persistent, assertive, acknowledgeable safety alert: a loud banner for a critical condition (allergy, contraindication, panic value, over-dose) that announces assertively, requires an explicit acknowledgement, and exposes that acked state so the consumer can block a sign-off until it's cleared. Stronger than Alert (which is presentational and has no acknowledge contract).
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| title | ReactNode | - | The headline (the critical condition). |
| tone | "destructive" | "warning" | "info" | "destructive" | destructive (アレルギー/禁忌/異常) announces assertively (role=alert); warning/info announce politely (role=status). |
| titleAs | "h2" | "h3" | "h4" | "p" | "h3" | Heading level for the title (keep page heading order correct). |
| requireAck | boolean | - | Require an explicit acknowledgement — renders the ack control and reflects the acked state. |
| acknowledged / defaultAcknowledged | boolean | - | Controlled / initial acknowledged state. Read it to block a sign-off until cleared. |
| onAcknowledge | () => void | - | Fired when the user acknowledges. |
| ackLabel / acknowledgedLabel | ReactNode | - | Ack button label (default "確認しました") / acknowledged note (default "確認済み"). |
| icon / actions | ReactNode | - | Leading icon override (defaults to a tone icon) / trailing actions (報告 / 詳細). |
| children | ReactNode | - | Details / body. |
Usage
import { SafetyBanner, Button } from "@gunjo/ui"
// require acknowledgement, then gate the sign-off on the acked state
const [acked, setAcked] = useState(false)
<SafetyBanner
tone="destructive"
title="アレルギー警告：ペニシリン"
requireAck
acknowledged={acked}
onAcknowledge={() => setAcked(true)}
>
処方薬「アモキシシリン」は患者のアレルギーに該当します。投与は禁忌です。
</SafetyBanner>
<Button disabled={!acked}>処方を署名</Button>