Chip

テキストをタグのように装飾して表示するためのコンポーネントです。

Chipを用いて装飾するのに向いているテキストはオブジェクトのプロパティで、タグやカテゴリーなどが該当します。

使用上の注意

オブジェクトのステータス表示に使用しない

オブジェクトのステータスにはStatusLabelを使用してください。

操作フィードバックの表示に使用しない

操作フィードバックの表示には他のコンポーネントが適しています。

フィードバックを参照し、ResponseMessageやNotificationBarの使用を検討してください。

重要な情報の表示に使用しない

Chipは小さいため、重要な情報の表示には適していません。

基本的には、オブジェクトのプロパティや補足情報のような、通常のテキストのスタイルやサイズで表示するほどでもないものを表示するのに適しています。

入力の必須条件や必ず確認させたいメッセージの表示には、ResponseMessageやInformationPanelを使用してください。

リンクを含めない

過剰な装飾となるため、Chip内のテキストの一部または全部にリンクを含めないでください。リンクを使用したい場合は、TextLinkを使用してください。

アクションの要素を含めない

Chipは小さいため、操作が必要なアクションの要素を持たせることに適していません。Buttonなどの使用を検討してください。

使い方チェックリスト

Chip

参照元：使用上の注意 > オブジェクトのステータス表示に使用しない 「使用上の注意 > オブジェクトのステータス表示に使用しない」の本文へ移動

• Must

  オブジェクトのステータス表示には Chip を使わず、StatusLabel を使う

参照元：使用上の注意 > 操作フィードバックの表示に使用しない 「使用上の注意 > 操作フィードバックの表示に使用しない」の本文へ移動

• Should

  操作フィードバックの表示には Chip を使わず、ResponseMessage や NotificationBar の使用を検討する

参照元：使用上の注意 > 重要な情報の表示に使用しない 「使用上の注意 > 重要な情報の表示に使用しない」の本文へ移動

• Must

  入力の必須条件や必ず確認させたいメッセージなど重要な情報の表示には Chip を使わず、ResponseMessage や InformationPanel を使う

参照元：使用上の注意 > リンクを含めない 「使用上の注意 > リンクを含めない」の本文へ移動

• Must

  Chip 内のテキストの一部または全部にリンクを含めず、リンクを使用したい場合は TextLink を使う

参照元：使用上の注意 > アクションの要素を含めない 「使用上の注意 > アクションの要素を含めない」の本文へ移動

• Should

  Chip にアクションの要素を含めず、アクション要素を持たせたい場合は Button などの使用を検討する

Props