メニュー

ボタン
ボタンは、ユーザーが実行できるアクションを示します。

ダウンロード

タイプ

ボタンにはどんなタグでも使用できますが、<button>タグを使用するか、tabindex="0"プロパティを追加した場合にのみ、キーボードフォーカスが可能です。キーボードでアクセス可能なボタンは、クリック後のフォーカススタイルを保持するため、視覚的に違和感がある場合があります。

フォーカス可能

強調表示

ボタンは、様々なレベルの強調表示で書式設定できます。

site.variablesでブランドカラーをプライマリカラーとセカンダリカラーの変数に設定すると、UI要素の色テーマを使用できます。

アニメーション

ボタンは、非表示のコンテンツを表示するアニメーションを実行できます。

ボタンのサイズは、表示されているコンテンツサイズに応じて自動的に調整されます。非表示のコンテンツを表示するのに十分なスペースがあることを確認してください。
次へ
Proアカウントに登録

ラベル付き

ボタンは、ラベルと一緒に表示できます。

いいね
2,048
2,048
いいね
いいね
1,048
フォーク
1,048

アイコン

ボタンにはアイコンのみを含めることができます。

ラベル付きアイコン

ボタンは、アイコンをラベルとして使用できます。

ベーシック

ベーシックボタンは控えめな見た目です。

反転

ボタンは、暗い背景でも表示されるように書式設定できます。

グループ

ボタン

ボタンはグループとしてまとめて表示できます。

アイコンボタン

ボタングループには、アイコンのグループを表示できます。

コンテンツ

条件付き

ボタングループには、条件付きのボタンを含めることができます。

または、`data-text`属性を使用して、ボタンのテキストをローカライズまたは調整できます。条件付きのサイズが変更された場合は、`@orCircleSize`を調整する必要があります。

状態

アクティブ

ボタンは、現在アクティブなユーザー選択であることを示すことができます。

無効

ボタンは、現在操作できないことを示すことができます。

読み込み中

ボタンは、読み込みインジケーターを表示できます。

バリエーション

ソーシャル

ボタンは、ソーシャルウェブサイトへのリンクとして書式設定できます。

サイズ

ボタンには様々なサイズがあります。

フロート

ボタンは、コンテナの左または右に配置できます。

カラー

ボタンには様々な色があります。

コンパクト

ボタンは、パディングを小さくして狭いスペースに収まるようにできます。

トグル

ボタンは、オンとオフを切り替えるように書式設定できます。

肯定的

ボタンは、肯定的な結果を示唆できます。

否定的

ボタンは、否定的な結果を示唆できます。

フルサイズ

ボタンは、コンテナの幅全体を使用できます。

円形

ボタンを円形にすることができます。

垂直方向にアタッチ

ボタンは、他のコンテンツの上または下にアタッチできます。

一つ
二つ
一つ
二つ

水平方向にアタッチ

ボタンは、他のコンテンツの左または右にアタッチできます。

グループのバリエーション

垂直方向のボタン

グループは、垂直方向に表示されるように書式設定できます。

アイコンボタン

グループは、アイコンとして書式設定できます。

ラベル付きアイコンボタン

グループは、ラベル付きアイコンとして書式設定できます。

混合グループ

グループは、複数のボタンタイプをまとめて使用するように書式設定できます。

等幅

グループの幅を均等に分割できます。

カラーボタン

グループは共通の色を持つことができます。

ベーシックボタン

ボタングループは控えめな見た目にすることができます。

一つ
二つ
三つ

グループサイズ

グループは共通のサイズを持つことができます。

ディマーメッセージ
ディマーサブヘッダー