バナーとコールアウト
文中に置くお知らせです。バナーは spark の罫線から始まり、コールアウトは情報・注意・完了のいずれかの調子で、言葉で伝えます。
バリエーション
情報
知っておくと役に立つこと。
プロパティ
▾
コード
import { Callout } from "@/components/ui/kit/feedback";
<Callout title="情報" body="知っておくと役に立つこと。" />すべての状態
Banner
お知らせ
spark の罫線がついたバナー。
中立のバナー。
Callout
情報
知っておくと役に立つこと。
注意
先に進む前に確認してください。
完了
うまくいきました。
使い方
使っているトークン
| --paper-2 | … |
|---|---|
| --line | … |
| --ink | … |
| --ink-2 | … |
| --ok | … |
| --ok-tint | … |
| --warn | … |
| --warn-tint | … |
| --font-display | … |
| --font-body | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。