Button

Dictionary

Element

AContainer

ボタンのかたちをつくる要素です。この要素の大きさが、ボタンをタップ/クリックできる範囲です。

BBody

ボタンのインタラクションラベルです。そのボタンを押すことによって発動する機能、またはそのボタンを押すことによって得られる結果や、ボタンを押すことによって発生させたい本来のアクションを示します。インセンティブ/ベネフィットの提示はラベルでは行わず、必要であればボタンの外側で行います。

CLeading (optional), DTrailing (optional)

ボタンの縁の要素です。インタラクションラベルの意味を伝わりやすくするために、情報を補完する機能を持ちます。原則的にLeadingにIconを配置しますが、画面の遷移を示す場合や、ページネーションでPrevとNextが対になっている場合など、文脈に応じてTrailingにIconを配置することもできます。

Option

Default*

Appearance

Buttonの見た目を指定できます。

	Modifier class
Flat*	`.-appearance-flat`
Outlined	`.-appearance-outlined`
Solid	`.-appearance-solid`
Transparent	`.-appearance-transparent`
White	`.-appearance-white`
Hollow	`.-appearance-hollow`

Flat

HTML

<button class="in-button -appearance-flat">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: flat
    )
  );
}

Outlined

HTML

<button class="in-button -appearance-outlined">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: outlined
    )
  );
}

Solid

HTML

<button class="in-button -appearance-solid">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: solid
    )
  );
}

Transparent

HTML

<button class="in-button -appearance-transparent">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: transparent
    )
  );
}

White

HTML

<button class="in-button -appearance-white">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: white
    )
  );
}

Hollow

HTML

<button class="in-button -appearance-hollow">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button {
  @include inhouse.button-style(
    $options: (
      appearance: hollow
    )
  );
}

Brightness

Appearanceの中でも背景色が透明なものはBrightness（環境の輝度）を指定できます。指定するとButtonを置く環境の輝度に応じた最適な見た目になります。

	Modifier class
Light*	`.-brightness-light`
Dark	`.-brightness-dark`

Light

HTML

<button class="in-button -appearance-transparent -brightness-light">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -appearance-hollow -brightness-light">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-transparent-light {
  @include inhouse.button-style(
    $options: (
      appearance: transparent,
      brightness: light
    )
  );
}

.button-hollow-light {
  @include inhouse.button-style(
    $options: (
      appearance: hollow,
      brightness: light
    )
  );
}

Dark

HTML

<button class="in-button -appearance-transparent -brightness-dark">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -appearance-hollow -brightness-dark">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-transparent-dark {
  @include inhouse.button-style(
    $options: (
      appearance: transparent,
      brightness: dark
    )
  );
}

.button-hollow-dark {
  @include inhouse.button-style(
    $options: (
      appearance: hollow,
      brightness: dark
    )
  );
}

Color

ボタンの色は、意味に対応してSemantic colorの名前を指定することで配色します。

	Modifier class	Pepper flavor
Informative	`.-color-informative`	Pepper Blue
Neutral*	`.-color-neutral`	Pepper Gray
Positive	`.-color-positive`	Pepper Green
Notice	`.-color-notice`	Pepper Yellow
Negative	`.-color-negative`	Pepper Red
Attention	`.-color-attention`	Pepper Orange
Interactive	`.-color-interactive`	Pepper Blue
Favorite	`.-color-favorite`	Pepper Red

HTML

<button class="in-button -color-neutral">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-informative">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-positive">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-negative">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-notice">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-attention">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-interactive">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -color-favorite">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-neutral {
  @include inhouse.button-style(
    $options: (
      color: neutral
    )
  );
}

.button-informative {
  @include inhouse.button-style(
    $options: (
      color: informative
    )
  );
}

.button-posotive {
  @include inhouse.button-style(
    $options: (
      color: positive
    )
  );
}

.button-negative {
  @include inhouse.button-style(
    $options: (
      color: negative
    )
  );
}

.button-notice {
  @include inhouse.button-style(
    $options: (
      color: notice
    )
  );
}

.button-attention {
  @include inhouse.button-style(
    $options: (
      color: attention
    )
  );
}

.button-interactive {
  @include inhouse.button-style(
    $options: (
      color: interactive
    )
  );
}

.button-favorite {
  @include inhouse.button-style(
    $options: (
      color: favorite
    )
  );
}

Shape

形状を指定できます。

	Modifier class
Square	`.-shape-square`
Circle	`.-shape-circle`

HTML

<button class="in-button -shape-square">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -shape-circle">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-square {
  @include inhouse.button-style(
    $options: (
      shape: square,
    )
  );
}

.button-circle {
  @include inhouse.button-style(
    $options: (
      shape: circle,
    )
  );
}

Size

どのくらいの大きさで表示するか指定できます。

	Modifier class
XS	`.-size-xs`
S	`.-size-s`
M*	`.-size-m`
L	`.-size-l`
XL	`.-size-xl`

HTML

<button class="in-button -size-xs">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -size-s">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -size-m">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -size-l">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -size-xl">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-xs {
  @include inhouse.button-style(
    $options: (
      size: xs
    )
  );
}

.button-s {
  @include inhouse.button-style(
    $options: (
      size: s
    )
  );
}

.button-m {
  @include inhouse.button-style(
    $options: (
      size: m
    )
  );
}

.button-l {
  @include inhouse.button-style(
    $options: (
      size: l
    )
  );
}

.button-xl {
  @include inhouse.button-style(
    $options: (
      size: xl
    )
  );
}

State

Buttonの状態を強制します。

	Modifier class
Enabled*	`.—enabled`
Hover	`.—hover`
Focused	`.—focused`
Disabled	`.—disabled`

HTML

<button class="in-button --enabled">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button --hover">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button --focused">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button --disabled">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-enabled {
  @include inhouse.button-style(
    $options: (
      state: enabled
    )
  );
}

.button-hover {
  @include inhouse.button-style(
    $options: (
      state: hover
    )
  );
}

.button-focused {
  @include inhouse.button-style(
    $options: (
      state: focused
    )
  );
}

.button-disabled {
  @include inhouse.button-style(
    $options: (
      state: disabled
    )
  );
}

Width

親要素の幅に対してどのくらいの幅でContainerを表示するかを指定できます。

このModifierは、CardやDialogコンポーネントなど、限られた幅を持つ要素のなかにアクションボタンとしてButtonを配置することを想定して用意されました。HalfやThirdは、ブラウザのウィンドウの幅によっては想定より小さく表示されてしまう場合があります。そこで、まずFullでレイアウトを試してみて、Fullでは表示する領域が広すぎる場合に限り、HalfまたはThirdを選択することをおすすめします。

	Modifier class
Auto*	`.-width-auto`
Full	`.-width-full`
Half	`.-width-half`
Third	`.-width-third`

HTML

<button class="in-button -width-auto">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -width-full">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -width-half">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -width-third">
  <div class="_body">
    Button
  </div>
</button>

SCSS

@use '@inhouse/inhouse-components-web' as inhouse;

.button-auto {
  @include inhouse.button-style(
    $options: (
      width: auto
    )
  );
}

.button-full {
  @include inhouse.button-style(
    $options: (
      width: full
    )
  );
}

.button-half {
  @include inhouse.button-style(
    $options: (
      width: half
    )
  );
}

.button-third {
  @include inhouse.button-style(
    $options: (
      width: third
    )
  );
}

Leading

Bodyの前に要素を挿入することができます。Iconが入ったLeadingのみの場合はIconが大きくなります。デバイスサイズに応じて切り替えることができます。

HTML

<button class="in-button">
  <div class="_leading">
    <span class="in-icon" data-icon="heart"></span>
  </div>
</button>
<button class="in-button">
  <div class="_leading">
    <span class="in-icon" data-icon="heart"></span>
  </div>
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button">
  <div class="_leading">
    <span class="in-icon" data-icon="heart"></span>
  </div>
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button">
  <div class="_leading">
    <div class="in-avatar -size-xs">
      <img src="https://picsum.photos/id/177/200/300" />
    </div>
  </div>
</button>
<button class="in-button">
  <div class="_leading">
    <div class="in-avatar -size-xs">
      <img src="https://picsum.photos/id/177/200/300" />
    </div>
  </div>
  <div class="_body">
    Button
  </div>
</button>

Trailing

Bodyの後に要素を挿入することができます。

HTML

<button class="in-button">
  <div class="_body">
    Button
  </div>
  <div class="_trailing">
    <span class="in-icon" data-icon="chevron_right"></span>
  </div>
</button>