ボタン : MT7 Styleguide

利用目的

.btn-primary 表示画面で最も重要なアクション。原則として 1 画面ひとつとします。
.btn-danger データを削除するなど取り消しができないアクション。

ベストプラクティス

正確かつ明瞭な表現を用います
次の画面で何が起こるのか説明します
動詞だけでは伝わりにくい場合は名詞と組み合わせた表現にします
「する」などの助動詞は極力使わないようにします

フォームに対して何か操作をする場合
具体的な行動・操作をしてもらいたいとき
ある特定の状態に変更したいとき

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>

モバイル用

extra small device, small device の時にボタンを横幅いっぱいに広げます。

<button type="button" class="btn__mobile btn-primary">モバイル用ボタン</button>

サイズ

.btn-lg（大）、.btn-lg（小）を加えることで大きさを変えることができます。

// ボタン大
<button type="button" class="btn btn-primary btn-lg">ボタン</button>
// ボタン小
<button type="button" class="btn btn-primary btn-sm">ボタン</button>

アイコン

アイコンのドキュメンテーションに記載されている、色と大きさのバリエーションを活用して実装します。ボタンを大きくしても、アイコンサイズは .mt-icon のままキープしてください。

// アイコン + ボタン小
<button type="button" class="btn btn-default btn-sm"><svg role="img" class="mt-icon mt-icon--sm"><title>追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg>ボタン</button>
// アイコン + ボタン
<button type="button" class="btn btn-default"><svg role="img" class="mt-icon mt-icon"><title>追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg>ボタン</button>
// アイコン + ボタン大
<button type="button" class="btn btn-default btn-lg"><svg role="img" class="mt-icon mt-icon"><title>追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg>ボタン</button>

ドロップダウン

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ドロップダウン</button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">メニュー</a>
    <a class="dropdown-item" href="#">メニュー 2</a>
    <a class="dropdown-item" href="#">メニュー 3</a>
  </div>
</div>

ブロック要素

ボタンをコンテンツの横幅に合わせたい場合は、ボタンに .btn-block を追記します。

<button type="button" class="btn btn-default btn-lg btn-block"><svg role="img" class="mt-icon mt-icon"><title>追加</title><use xlink:href="../images/sprite.svg#ic_add" /></svg>ボタン</button>

コンテンツブロック

コンテンツ追加画面でコンテンツブロックを追加するときに利用する要素。横幅に依存する要素なので、12 カラムグリッドを利用して調整します。

選択中のコンテンツブロックを示す場合は .btn-contentblock--selected を追記します。

<div class="row">
  <div class="col"><button class="btn btn-contentblock"><svg role="img" class="mt-icon mt-icon"><title>埋め込み</title><use xlink:href="../images/sprite.svg#ic_code" /></svg>埋め込み</button></div>
  <div class="col"><button class="btn btn-contentblock btn-contentblock--selected"><svg role="img" class="mt-icon mt-icon"><title>画像</title><use xlink:href="../images/sprite.svg#ic_image" /></svg>画像</button></div>
</div>