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>