Components

Accordion

開閉可能なコンテンツを表示するコンポーネント。内部ではネイティブの<details>要素と<summary>要素を使用

ActionHalfModal

画面の下部を占有する、アクションを実行するためのモーダルダイアログ

ActionModal

ユーザーに確認や操作などを求める場合に使用するモーダルダイアログ

Bold

テキストを太字に

Box

Webレイアウトの基本であるボックスを提供します

ButtonCard

カード状のボタン

Button

ユーザーがアクションを実行するためのボタン

Center

中央配置のコンテナ。子要素を中央揃えすることも可能

CheckboxCard

カード状のチェックボックス

Checkbox

複数選択、または選択/未選択の切り替え

Color

テキストやアイコンの色を変更

Divider

コンテンツの区切り

Flex

display: flexのラッパーコンポーネント

Heading

ページ、セクションなどの見出しを提供

Icon

視覚的な「手がかり」を提供

Input

テキストを入力可能なテキストフィールド

LinkButton

リンクとして機能するボタン

LinkCard

表現力豊かで、遷移先の内容の一部を提示可能なリンク

MessageHalfModal

MessageModal

メッセージへユーザーをフォーカスさせるためのダイアログ

Pre

テキストの折り返しを制御

RadioButton

リストの中から1つの項目を選択

RadioCard

Accessibilityに配慮したカード状のラジオボタン

Select

複数の選択肢から1つを選ぶためのコンポーネント。内部でネイティブの<select>要素を利用

Stack

垂直方向に、一定のリズムで要素を積み上げるレイアウト

TextArea

複数行のテキスト入力が可能なフィールド

Text

Design Systemに則ったTypographyのスタイルを提供

Toggle

設定をオンまたはオフに切り替えるためのコンポーネント