CheTextMsg

テキストメッセージコンポーネントです。プレーンテキスト、エラーメッセージ、ヒントの表示に使用します。

基本

variant を指定しない場合、アイコンなしのプレーンテキストとして表示されます。

<CheTextMsg>テキストメッセージが入ります</CheTextMsg>

バリアント

variant を指定すると、バリアントに応じたアイコンとテキスト色が自動で適用されます。

<CheTextMsg>テキストメッセージが入ります</CheTextMsg>
<CheTextMsg variant="error">入力してください</CheTextMsg>
<CheTextMsg variant="tips">入力してください</CheTextMsg>

エラー

variant="error" でエラーメッセージを表示します。テキストは赤色になり、x-mark アイコンが付きます。

<CheTextMsg variant="error">入力してください</CheTextMsg>

ヒント

variant="tips" でヒントメッセージを表示します。テキストはグレー、青色のサポートアイコンが付きます。

<CheTextMsg variant="tips">入力してください</CheTextMsg>

サイズ

size でフォントサイズを指定できます。デフォルトは "12" です。

<CheTextMsg size="12">テキストメッセージが入ります</CheTextMsg>
<CheTextMsg size="14">テキストメッセージが入ります</CheTextMsg>

※（アノテーション）・（リストアイテム）

Figma 上の「annotation」「listItem」パターンは、コンポーネントを使わずプレーンな HTML で表現します。

<!-- ※（アノテーション） -->
<ul class="list-['※'] pl-4">
  <li class="font-sans text-12 leading-normal text-gray-80">
    テキストメッセージ
  </li>
</ul>

<!-- ・（リストアイテム） -->
<ul class="list-disc pl-4">
  <li class="font-sans text-12 leading-normal text-gray-80">
    テキストメッセージ
  </li>
</ul>

すべてのバリエーション

すべてのバリエーション一覧は カタログページ を参照してください。

Props