Callout

本文の中に置く注記。補足や落とし穴を、段落やコードを含めて書ける

インポート

ts
import { Callout } from '@k8ordo/ui';

使い方

情報

Note

Values stay in the DOM, so typing never re-renders.

tsx
<Callout label="Note" tone="info">
  <p>Values stay in the DOM, so typing never re-renders.</p>
</Callout>

ステータス

成功

Supported

Works in every core browser.

情報

Note

The browser checks the input before it is sent.

警告

Pitfall

A controlled field is not restored by a form reset.

エラー

Deprecated

This option goes away in the next major.

tsx
<Callout label="Supported" tone="success">…</Callout>
<Callout label="Note" tone="info">…</Callout>
<Callout label="Pitfall" tone="warning">…</Callout>
<Callout label="Deprecated" tone="error">…</Callout>

本文にコードやリンクを書く

本文は children なので、段落を重ねたり Code や Anchor を入れたりできます。label を省くと、アイコンと本文だけになります。

警告

Pitfall

Passing value makes the field controlled, and a form reset no longer restores it.

Pass defaultValue instead. See the input reference.

情報

This article reflects the API as of July 2023.

tsx
<Callout label="Pitfall" tone="warning">
  <p>
    Passing <Code>value</Code> makes the field controlled, and a form
    reset no longer restores it.
  </p>
  <p>
    Pass <Code>defaultValue</Code> instead. See{' '}
    <Anchor href="https://react.dev/reference/react-dom/components/input">
      the input reference
    </Anchor>
    .
  </p>
</Callout>

<Callout tone="info">
  <p>This article reflects the API as of July 2023.</p>
</Callout>

Alert との使い分け

Alert は操作の結果やアプリの状態を知らせる部品で、表示されるとスクリーンリーダーが読み上げます。記事やガイドの本文に置く補足には Callout を使います。role="note" なので、ページの読み込みやクライアント側の遷移で差し込まれても読み上げられません。

Props

children
Type: ReactNode
Default: -
tone
Type: Status
Default: -
label?
Type: string
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

このコンポーネントが描画する文言（ラベルやプレースホルダーなど）は、propsで指定しないとき文言辞書から解決されます。差し替え方は次を参照してください: i18n

Components