Components

組み合わせによる、迅速なプロダクト構築をサポートします。コードサンプルと使用方法を紹介します。

  • Accordion

    Accordion

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

  • ActionHalfModal

    ActionHalfModal

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

  • ActionModal

    ActionModal

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

  • Bold

    Bold

    テキストを太字に

  • Box

    Box

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

  • ButtonCard

    ButtonCard

    カード状のボタン

  • Button

    Button

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

  • Center

    Center

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

  • CheckboxCard

    CheckboxCard

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

  • Checkbox

    Checkbox

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

  • Color

    Color

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

  • Divider

    Divider

    コンテンツの区切り

  • Flex

    Flex

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

  • Heading

    Heading

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

  • Icon

    Icon

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

  • Input

    Input

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

  • LinkButton

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

  • LinkCard

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

  • MessageHalfModal

    MessageHalfModal

  • MessageModal

    MessageModal

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

  • Pre

    Pre

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

  • RadioButton

    RadioButton

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

  • RadioCard

    RadioCard

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

  • Select

    Select

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

  • Stack

    Stack

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

  • TextArea

    TextArea

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

  • Text

    Text

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

  • Toggle

    Toggle

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