ボタン

Examples

いくつかの定義済みのボタンスタイルがあり, それぞれ目的を持っています。

Last clicked button

vue

<template>
 <b-button
  color="primary"
  @click="clicked"
 >
  Primary
 </b-button>
 <b-button
  color="secondary"
  @click="clicked"
 >
  Secondary
 </b-button>
 <b-button
  color="success"
  @click="clicked"
 >
  Success
 </b-button>
 <b-button
  color="danger"
  @click="clicked"
 >
  Danger
 </b-button>
 <b-button
  color="warning"
  @click="clicked"
 >
  Warning
 </b-button>
 <b-button
  color="info"
  @click="clicked"
 >
  Info
 </b-button>
 <b-button
  color="light"
  @click="clicked"
 >
  Light
 </b-button>
 <b-button
  color="dark"
  @click="clicked"
 >
  Dark
 </b-button>
 <b-button
  color="link"
  @click="clicked"
 >
  Link
 </b-button>
 <b-dl margin="t-5">
  <b-dt col="sm-3">
   Last clicked button
  </b-dt>
  <b-dd col="sm-9">
   {{ lastClicked }}
  </b-dd>
 </b-dl>
</template>

<script setup>
const lastClicked = ref('');
const clicked = (event) => {
 lastClicked.value = event.srcElement.className;
};
</script>

Disable text wrapping

ボタンのテキストを折り返したくない場合は、text-wrap="nowrap" 属性をボタンに追加することができます。Sassでは、$btn-white-space: nowrap を設定することで、各ボタンのテキストの折り返しを無効にすることができます。

Button tags

button 属性は<b-a> や <b-input> 要素でも使うことができます。 (ブラウザによっては若干異なるレンダリングが適用される場合があります)

現在のページ内で、新しいページやセクションへのリンクではなく、ページ内の機能(コンテンツの折りたたみなど)のトリガーとして使用される <b-a> 要素に、ボタンクラスを使用する場合、これらのリンクには type 属性を与え、スクリーンリーダのような支援技術のためにその目的を適切に伝えるべきです。

Link

vue

<template>
 <Anchor
  button
  color="primary"
  to="/"
 >
  Link
 </Anchor>
 <b-button
  color="primary"
  type="submit"
 >
  Button
 </b-button>
</template>

Outline buttons

ボタンが必要、背景色が多くて困ったときは color="outline-*" を適用すると枠線を残してボタンの背景色を透過することができます。

vue

<template>
 <b-button color="outline-primary">
  Primary
 </b-button>
 <b-button color="outline-secondary">
  Secondary
 </b-button>
 <b-button color="outline-success">
  Success
 </b-button>
 <b-button color="outline-danger">
  Danger
 </b-button>
 <b-button color="outline-warning">
  Warning
 </b-button>
 <b-button color="outline-info">
  Info
 </b-button>
 <b-button color="outline-light">
  Light
 </b-button>
 <b-button color="outline-dark">
  Dark
 </b-button>
</template>

Sizes

ボタンのサイズを size="lg" や size="sm" を適用すると変更できます。

vue

<template>
 <b-button
  color="primary"
  size="lg"
 >
  Large button
 </b-button>
 <b-button
  color="secondary"
  size="lg"
 >
  Large button
 </b-button>
</template>

vue

<template>
 <b-button
  color="primary"
  size="sm"
 >
  Small button
 </b-button>
 <b-button
  color="secondary"
  size="sm"
 >
  Small button
 </b-button>
</template>

Disabled state

ボタンを非アクティブに見せるには、disabled 属性を追加します。無効化されたボタンには pointer-events: none が適用され、ホバーやアクティブな状態がトリガーされるのを防ぎます。

vue

<template>
 <b-button
  disabled
  color="primary"
  size="lg"
 >
  Primary button
 </b-button>
 <b-button
  disabled
  color="secondary"
  size="lg"
 >
  Secondary button
 </b-button>
</template>

Link functionality caveat

.disabled クラスは <a> の機能を使えなくする pointer-events: none を使用していますが、この CSS プロパティは標準化されていません。

もしブラウザが pointer-events: none をサポートしていない場合、キーボードナビゲーションが影響を受けず残り続け、キーボードを用いたユーザやスクリーンリーダーなどの補助機能を使ったユーザはこのリンクを開くことができます。

安全のため、これらのリンクに aria-disabled="true"に加えて、 tabindex="-1" 属性（キーボードからのフォーカスを防ぐ）をつけ、カスタム JavaScript を用いてこれらの機能を無効にしてください。

Primary link Link

vue

<template>
 <Anchor
  disabled
  to="/"
  color="primary"
  size="lg"
  tabindex="-1"
 >
  Primary link
 </Anchor>
 <Anchor
  disabled
  to="/"
  color="secondary"
  size="lg"
  tabindex="-1"
 >
  Link
 </Anchor>
</template>

Block buttons

display ユーティリティと gap ユーティリティを組み合わせて、Bootstrap4のような全幅の「ブロックボタン」のレスポンシブスタックを作成します。

ボタン固有のクラスの代わりにユーティリティを使用することで、間隔、配置、およびレスポンシブ動作を大幅に制御できます。

vue

<template>
 <b-div
  display="grid"
  gap="2"
 >
  <b-button color="primary">
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
 </b-div>
</template>

レスポンシブのバリエーションです。ブラウザのサイズを変更して、確認してみてください。

md ブレークポイントまで、 display="md-block" が display="grid" クラスを置き換え、gap="2" 属性を無効にします。

vue

<template>
 <b-div
  display="grid md-block"
  gap="2"
 >
  <b-button color="primary">
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
 </b-div>
</template>

grid column を使用して、ブロックボタンの幅を調整できます。たとえば、半分の幅の “block button” の場合は、 col="6" を使用します。

margin="x-auto" も水平方向に中央揃えにします。

vue

<template>
 <Col
  display="grid"
  gap="2"
  margin="x-auto"
  col="6"
 >
  <b-button color="primary">
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
 </Col>
</template>

追加の属性を使用して、水平の場合のボタンの配置を調整できます。

前のレスポンシブな例を取り上げ、ボタンにいくつかのflex 属性と margin 属性を追加して、ボタンがスタックされなくなったときにボタンが右揃えになります。

vue

<template>
 <b-div
  display="grid md-flex"
  gap="2"
  justify-content="md-end"
 >
  <b-button
   color="primary"
   margin="e-md-2"
  >
   Button
  </b-button>
  <b-button color="primary">
   Button
  </b-button>
 </b-div>
</template>

Button plugin

ボタンのプラグインでは、シンプルなオン/オフのトグルボタンを作成することができます。

tip

視覚的には、これらのトグルボタンはチェックボックスのトグルボタンと同じです。チェックボックスのトグルは、スクリーンリーダーによって、"checked"/"not checked"とアナウンスされます（外見にかかわらず、基本的にはチェックボックスであるためです。）。これら2つのアプローチのどちらを選択するかは、作成するトグルのタイプ、およびトグルがチェックボックスとしてアナウンスされた時と実際のボタンとしてアナウンスされた時のどちらがユーザーにとって意味があるかによって決まります。

Toggle states

toggle="button" を追加して, ボタンの active 状態を切り替えます。

事前に切り替える場合は, active 属性を追加して, スクリーンリーダーに適切に伝達されるようにする必要があります。

vue

<template>
 <b-button
  color="primary"
  toggle="button"
 >
  Toggle button
 </b-button>
 <b-button
  color="primary"
  toggle="button"
  active
 >
  Active Toggle button
 </b-button>
 <b-button
  color="primary"
  toggle="button"
  disabled
 >
  Disabled Toggle button
 </b-button>
</template>

Toggle link Active toggle link Disabled toggle link

vue

<template>
 <Anchor
  color="primary"
  toggle="button"
 >
  Toggle link
 </Anchor>
 <Anchor
  color="primary"
  toggle="button"
  active
 >
  Active toggle link
 </Anchor>
 <Anchor
  color="primary"
  toggle="button"
  disabled
 >
  Disabled toggle link
 </Anchor>
</template>

Extend

Icon Button

vue

<template>
 <b-button
  color="dark"
  icon="bi:person-fill"
 />
 <b-button
  color="secondary"
  icon="bi:1-circle-fill"
  icon-end
 >
  sample
 </b-button>
 <b-button
  color="success"
  rounded="circle"
  icon="bi:person"
 />
 <BInputGroup margin="t-3">
  <BInputGroupText id="basic-addon1">
   <BIcon icon="bi:person-fill" />
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
   aria-describedby="basic-addon1"
  />
 </BInputGroup>
</template>

Subtle theme colors

All colors

Translate on Hover

vue

<template>
 <b-button
  color="primary"
  size="md"
  class="hover:-un-translate-y-0.5"
 >
  Large button
 </b-button>
</template>

Bootstrap

ボタン