module-button

echo-button

リンク、インライン要素、フォームのボタン要素をボタン状に表示する。
左右に 1em の余白が確保される。

サブクラス .echo-button-style-(style) が必須であり、付与していない場合は最低限の装飾となる。

.disabled もしくは disabled="disabled" が付与されていると、反応しない見た目となる。
(他のフレームワークとの互換のため .disabled に接頭辞は設けていない)

ボタンのdisplayプロパティは inline-flex を指定している。このため、連続して配置すると右に改行コード分の余白が生じる。
整列や中央寄せをしたい場合は component > .echo-formlayout > .echo-buttons を使用すること。

スタイルの変化 group: button
(breakpoint).echo-***-sm.echo-***.echo-***-lg.echo-***-xl.echo-***-xxl
(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ(fontsize)最低高さ
md以下 xs 2.25rem
(36px)
sm 2.5rem
(40px)
md 2.75rem
(44px)
lg 3rem
(48px)
xl 3.25rem
(52px)
lg以上 sm 2.5rem
(40px)
md 2.75rem
(44px)
lg 3.125rem
(50px)
xl 3.5rem
(56px)
xxl 4rem
(64px)

この表の解説

a要素 echo-button echo-button

span要素 echo-button echo-button

input要素のbutton

button要素

テキストが極端に長い場合、または .echo-buttons に含まれる場合は最大幅で停止する。 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ

<p>
  <dfn>a要素</dfn>
  <a href="#" class="echo-button">echo-button</a>
  <a href="#" class="echo-button disabled">echo-button</a>
</p>

<p>
  <dfn>span要素</dfn>
  <span class="echo-button">echo-button</span>
  <span class="echo-button disabled">echo-button</span>
</p>

<p>
  <dfn>input要素のbutton</dfn>
  <input type="button" class="echo-button" value="echo-button" />
  <input type="button" class="echo-button" value="echo-button" disabled="disabled" />
</p>

<p>
  <dfn>button要素</dfn>
  <button class="echo-button">echo-button</button>
  <button class="echo-button" disabled="disabled">echo-button</button>
</p>

<p>
  <dfn>テキストが極端に長い</dfn>
  <a href="#" class="echo-button">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a>
</p>

sub class echo-button-style-(style)

ボタンの外観を変更する。
.echo-button-(color) が付与されていない場合はボタンの色が $default となる。

a要素 + style-a echo-button-style-a echo-button-style-a

input要素のbutton + style-a

a要素 + style-b echo-button-style-b echo-button-style-b

input要素のbutton + style-a

<p>
  <dfn>a要素 + style-a</dfn>
  <a href="#" class="echo-button echo-button-style-a">echo-button-style-a</a>
  <a href="#" class="echo-button echo-button-style-a disabled">echo-button-style-a</a>
</p>

<p>
  <dfn>input要素のbutton + style-a</dfn>
  <input type="button" class="echo-button echo-button-style-a" value=" echo-button-style-a" />
  <input type="button" class="echo-button echo-button-style-a" value=" echo-button-style-a" disabled="disabled" />
</p>

<p>
  <dfn>a要素 + style-b</dfn>
  <a href="#" class="echo-button echo-button-style-b">echo-button-style-b</a>
  <a href="#" class="echo-button echo-button-style-b disabled">echo-button-style-b</a>
</p>

<p>
  <dfn>input要素のbutton + style-a</dfn>
  <input type="button" class="echo-button echo-button-style-b" value=" echo-button-style-b" />
  <input type="button" class="echo-button echo-button-style-b" value=" echo-button-style-b" disabled="disabled" />
</p>

sub class echo-button-(color)

.echo-button-style-(style) と同時に使用することを前提に、ボタンの色を変更する。
(color)は標準のカラーテーブルを参照。

<p>
  <dfn>info + style-a</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-info">echo-button-info</a>
  <a href="#" class="echo-button echo-button-style-a echo-button-info disabled">echo-button-info</a>
</p>

<p>
  <dfn>info + style-b</dfn>
  <a href="#" class="echo-button echo-button-style-b echo-button-info">echo-button-info</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-info disabled">echo-button-info</a>
</p>

<p>
  <dfn>important + style-a</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-important">echo-button-important</a>
  <a href="#" class="echo-button echo-button-style-a echo-button-important disabled">echo-button-important</a>
</p>

<p>
  <dfn>important + style-b</dfn>
  <a href="#" class="echo-button echo-button-style-b echo-button-important">echo-button-important</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-important disabled">echo-button-important</a>
</p>

<p class="echo-bg-default echo-padding-md">
  <dfn>inverse + style-a</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-inverse">echo-button-inverse</a>
  <a href="#" class="echo-button echo-button-style-a echo-button-inverse disabled">echo-button-inverse</a>
</p>

<p class="echo-bg-default echo-padding-md">
  <dfn>inverse + style-b</dfn>
  <a href="#" class="echo-button echo-button-style-b echo-button-inverse">echo-button-inverse</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-inverse disabled">echo-button-inverse</a>
</p>

sub class echo-button-(size)

ボタンの文字サイズ、最低高さ、最大幅を変更する。
(size)は、 sm, lg, xl, xxl に対応している。

Sassを使用できる場合、 _scss/config_advance.scss の配列 $button-min-font-sizes, $button-max-font-sizes, $button-min-widths, $button-max-widthsで変更できる。

sub class echo-button-fixed

.echo-button-(size) と同時に付与すると、ボタンが (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

各サイズは、前項の表内の最低値となる。

sub class echo-button-icon-(direction)

ボタンの右端、もしくは左端にアイコンを表示すべき領域のみを確保する。
(direction)の指定がない( .echo-button-icon )場合は右、 left であれば左となる。

:after 疑似要素にアイコンのスタイルを指定することを前提としており、echo.cssでは後述の echo-button-icon-arrow を付与したときのみアイコンが表示される。

この例では .echo-doc-button-icon クラスを付与して、アイコン領域を仮表示している。

default(right) echo-button-icon echo-button-icon

left echo-button-icon-left echo-button-icon-left

<style>
.echo-doc-button-icon:after {
  border: 1px solid #3a0;
  background-color: #fc8;
}
</style>

<p>
  <dfn>default(right)</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-icon echo-doc-button-icon">echo-button-icon</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-icon echo-doc-button-icon">echo-button-icon</a>
</p>

<p>
  <dfn>left</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-icon-left echo-doc-button-icon">echo-button-icon-left</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-icon-left echo-doc-button-icon">echo-button-icon-left</a>
</p>

sub class echo-button-icon-(name)

ボタンに実際にアイコンを表示する。右端に表示する場合は .echo-button-icon-(direction) は必要ない。

echo.cssでは(name)は arrow のみ対応しており、CSSのボーダーで生成したシェブロンを表示する。
(name)には仕様上 left, right が予約語となり使用できないことに注意。

<p>
  <dfn>right</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>

<p>
  <dfn>left</dfn>
  <a href="#" class="echo-button echo-button-style-a echo-button-icon-left echo-button-icon-arrow">echo-button-icon-arrow</a>
  <a href="#" class="echo-button echo-button-style-b echo-button-icon-left echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>

<div class="echo-padding-sm echo-bg-default">
<p>
  <dfn>left + inverse</dfn>
  <a href="#" class="echo-button echo-button-inverse echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
  <a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-right echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>

<p>
  <dfn>right + inverse</dfn>
  <a href="#" class="echo-button echo-button-inverse echo-button-style-a echo-button-icon-arrow">echo-button-icon-arrow</a>
  <a href="#" class="echo-button echo-button-inverse echo-button-style-b echo-button-icon-right echo-button-icon-arrow">echo-button-icon-arrow</a>
</p>
</div>

sub class echo-button-oval

ボタンを小判型にする。

<p>
  <a href="#" class="echo-button echo-button-oval">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a">echo-button-oval</a>
  <a href="#" class="echo-button echo-button-oval echo-button-style-b">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-info">echo-button-oval</a>
  <a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-info">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-important">echo-button-oval</a>
  <a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-important">echo-button-oval</a>
</p>

<p class="echo-bg-default echo-padding-md">
  <a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-inverse">echo-button-oval</a>
  <a href="#" class="echo-button echo-button-oval echo-button-style-b echo-button-inverse">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-icon-left echo-button-icon-arrow">echo-button-oval</a>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a echo-button-icon-arrow">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-sm echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-lg echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xl echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xxl echo-button-oval echo-button-style-a">echo-button-oval</a>
</p>

sub class echo-button-circle

ボタンを正円で表示する。
.echo-button-icon-(direction) は使用できない。
幅を超える文字数のテキストを表示することはできない。

メニューの展開ボタン等の重要なインターフェースに .echo-button-circle.echo-button-sm を使用することは推薦されない。

C

C C

C C

C C

C C

C

C

C

C

C

.echo-button-fixed を併用した場合

C

C

C

C

C

<p>
  <a href="#" class="echo-button echo-button-circle">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-circle echo-button-style-a">C</a>
  <a href="#" class="echo-button echo-button-circle echo-button-style-b">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-info">C</a>
  <a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-info">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-important">C</a>
  <a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-important">C</a>
</p>

<p class="echo-bg-default echo-padding-md">
  <a href="#" class="echo-button echo-button-circle echo-button-style-a echo-button-inverse">C</a>
  <a href="#" class="echo-button echo-button-circle echo-button-style-b echo-button-inverse">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-sm echo-button-circle echo-button-style-a">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-circle echo-button-style-a">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-lg echo-button-circle echo-button-style-a">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xl echo-button-circle echo-button-style-a">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xxl echo-button-circle echo-button-style-a">C</a>
</p>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">.echo-button-fixed を併用した場合</p>

<p>
  <a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-lg echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xl echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xxl echo-button-fixed echo-button-circle echo-button-style-b">C</a>
</p>

sub class echo-button-square

ボタンを正方形で表示する。
.echo-button-icon-(direction) は使用できない。
幅を超える文字数のテキストを表示することはできない。

メニューの展開ボタン等の重要なインターフェースに .echo-button-square.echo-button-sm を使用することは推薦されない。

S

S S

S S

S S

S S

S

S

S

S

S

.echo-button-fixed を併用した場合

S

S

S

S

S

<p>
  <a href="#" class="echo-button echo-button-square">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-square echo-button-style-a">S</a>
  <a href="#" class="echo-button echo-button-square echo-button-style-b">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-info">S</a>
  <a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-info">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-important">S</a>
  <a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-important">S</a>
</p>

<p class="echo-bg-default echo-padding-md">
  <a href="#" class="echo-button echo-button-square echo-button-style-a echo-button-inverse">S</a>
  <a href="#" class="echo-button echo-button-square echo-button-style-b echo-button-inverse">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-sm echo-button-square echo-button-style-a">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-square echo-button-style-a">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-lg echo-button-square echo-button-style-a">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xl echo-button-square echo-button-style-a">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xxl echo-button-square echo-button-style-a">S</a>
</p>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-sm">.echo-button-fixed を併用した場合</p>

<p>
  <a href="#" class="echo-button echo-button-sm echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-lg echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xl echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>

<p>
  <a href="#" class="echo-button echo-button-xxl echo-button-fixed echo-button-square echo-button-style-b">S</a>
</p>