Pepabo Design

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

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

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

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

Outlined

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

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

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

Solid

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

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

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

Transparent

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

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

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

White

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

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

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

Hollow

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

@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

<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>

@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

<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>

@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
<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>

@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
<button class="in-button -shape-square">
  <div class="_body">
    Button
  </div>
</button>
<button class="in-button -shape-circle">
  <div class="_body">
    Button
  </div>
</button>

@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
<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>

@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
<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>

@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
<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>

@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が大きくなります。デバイスサイズに応じて切り替えることができます。

<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の後に要素を挿入することができます。

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