Sparkle Design

Inline Message

インラインメッセージはユーザーにシステムやサービスの状態を伝えるために使用するコンポーネントです。

FigmaStorybookGitHub
Inline Message の概要図

Anatomy: 解剖図

Inline Messageの構成要素を示す解剖図。1はコンテナ要素を表すContainerを、2はアイコン要素を表すIconを、3は2の横に配置されているタイトルを表すTitleを、4は3の下に配置されているデスクリプションを表すDescriptionを、5は右上に配置されておりIcon Buttonを示しています。Inline Messageの構成要素を示す解剖図。1はコンテナ要素を表すContainerを、2はアイコン要素を表すIconを、3は2の横に配置されているタイトルを表すTitleを、4は3の下に配置されているデスクリプションを表すDescriptionを、5は右上に配置されておりIcon Buttonを示しています。
ItemNameDescriptionComponentOptional
1Containerコンテナ要素—
2Iconアイコン要素Icon—
3Title—
4Description—
5Icon ButtonIcon Button任意

Options: 選択肢

Status

info (default)

重要度が高い情報をユーザーに伝える際に使用するオプションです。

Status info のInline Message。青い背景に青い円の中に「i」の文字が入った情報アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

success

ポジティブな情報をユーザーに伝える際に使用するオプションです。

Status success のInline Message。緑色の背景に緑色の円の中にチェックマークが入った成功アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

warning

警告的文脈を含む情報をユーザーに伝える際に使用するオプションです。

Status warning のInline Message。黄色の背景に黄色の三角形の中に感嘆符が入った警告アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

negative

ネガティブな情報をユーザーに伝える際に使用するオプションです。

Status negative のInline Message。赤い背景に赤い円の中に感嘆符が入ったエラーアイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

isCloseTrigger

False

クローズボタンを非表示にする場合のオプションです。
永続的に表示する必要がある情報を提示する場合に使用します。

isCloseTrigger False のInline Message。青い背景に青い円の中に「i」の文字が入った情報アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが表示されています。

True

クローズボタンを表示する場合のオプションです。情報の重要性が低い場合はユーザーがインラインメッセージを閉じることができるようにします。

isCloseTrigger True のInline Message。青い背景に青い円の中に「i」の文字が入った情報アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

isTitle

True

タイトルを表示する場合のオプションです。

isTitle True のInline Message。青い背景に青い円の中に「i」の文字が入った情報アイコン、「タイトル」というテキストの下に「デスクリプション」というテキストが配置され、右上に閉じるボタンが表示されています。

False

タイトルを非表示にする場合のオプションです。

isTitle False のInline Message。青い背景に青い円の中に「i」の文字が入った情報アイコンの横に、「デスクリプション」というテキストが配置され、右端の中央に閉じるボタンが表示されています。

Metrics: 寸法

  • Vertical Resizing: Hug
  • Horizontal Resizing: Fixed
  • Item Spacing: 8px
  • Padding Horizontal: 12px
Inline Messageのコンテナ寸法仕様を示す図。
  • Vertical Resizing: Hug
  • Horizontal Resizing: Hug
  • Padding: 4px
Inline Messageのアイコン寸法仕様を示す図
  • Vertical Resizing: Hug
  • Horizontal Resizing: Fill
  • Item Spacing:0px
Inline Messageのテキスト寸法仕様を示す図。

Usage: 使い方

不適切な使用例。Status negative のInline Message。赤い背景に赤い円の中に感嘆符が入ったエラーアイコン、「お支払いに失敗しました」というテキストの下に「購入処理を中断しています。お支払い情報を修正してください。」というテキストが配置され、右上に閉じるボタンが表示されています。
Don’t

重要な情報を提示する場合やユーザーに特定の処理の実行を要求する場合はクローズボタンを有効化しないでください。

Contents: 内容

不適切な使用例。Status negative のInline Message。赤い背景にエラーアイコン、「山田太郎さんのユーザー情報に不備があります。修正をしてください。」というタイトル、「ユーザー情報を修正をしてください」というデスクリプションが表示されています。
Don’t

タイトルで冗長な表現を行わないでください。長くなる場合や2文以上になる場合は、デスクリプションで補完するようにしてください。

不適切な使用例。Status negative のInline Message。赤い背景にエラーアイコン、「更新失敗」というタイトル、「更新に失敗しました」というデスクリプションが表示されています。
Don’t

タイトルとデスクリプションの内容が重複するように記述しないでください。重複している場合はいずれかを非表示にすることを検討してください。

Related Components: 関連コンポーネント

Toast

Change log: 変更履歴

DateChanges
2025/06/27レイアウトと寸法を更新
2025/05/23アクセシビリティのレビューを完了
2025/03/12ドキュメントを公開
2023/10/14Figmaを公開
小さな気づきや違和感があれば、お気軽に教えてください。
フィードバック
Chat illustration
前へ次へ