Button

ボタンを表示するコンポーネントです。

対応するHTML構造

<a class="c--button" href="###">
	<span class="c--button__text">Button</span>
</a>

主なprops

keycolor: ボタンのキーカラー。デフォルトはmainカラーです。
variant: ボタンの表示スタイル。outline、ghostの2種類を用意しています。
- c--button--{variant}がクラスとして出力されます。
leftIcon, rightIcon: アイコンを指定できます。テキストの左右にアイコンを出力できます。
icon: アイコン。iconに指定するとアイコンのみ表示される。
isGrid: アイコンを端に寄せることができます。テキストとアイコンの並びがgridレイアウトになります。
hove: デフォルトはfadeが指定されています。

Hover Prop

Astroでアイコンの受け渡しどうする...。（jsxコンポーネントであれば問題なし。）

要検討

グラデーションなどどうする？
ブロック化時のプリセット機能
- data-preset="{keyword}"に対するCSSを設定できるようにする？
- primary, secondary... or main, sub, simple ... ?

Import

import { Button } from '@loos/lism-core';

DEMO

各variant

Fill Button Outline Button Text Button

リサイズ可能エリアです ↑

<Cluster gap={20}>
	<Button href="#button">Fill Button</Button>
	<Button href="#button" variant="outline">Outline Button</Button>
	<Button href="#button" variant="ghost">Text Button</Button>
</Cluster>

左にアイコン

Button Button Button

リサイズ可能エリアです ↑

import { ShoppingCartSimple } from "@phosphor-icons/react";
 
<Cluster gap={20}>
	<Button href="#button" leftIcon={ShoppingCartSimple}>Button</Button>
	<Button href="#button" leftIcon={ShoppingCartSimple} variant="outline">Button</Button>
	<Button href="#button" leftIcon={ShoppingCartSimple} variant="ghost">Button</Button>
</Cluster>

アイコンを右に

Button Button Button

リサイズ可能エリアです ↑

import { ArrowRight } from "@phosphor-icons/react";
 
<Cluster gap={20}>
	<Button href="#button" rightIcon={ArrowRight}>Button</Button>
	<Button href="#button" rightIcon={ArrowRight} variant="outline">Button</Button>
	<Button href="#button" rightIcon={ArrowRight} variant="ghost">Button</Button>
</Cluster>

アイコンのみのボタン。hoverも変えてみる

リサイズ可能エリアです ↑

import { ShoppingCartSimple, ArrowFatDown, ArrowRight } from "@phosphor-icons/react";
 
<Cluster gap={20}>
	<Button href="#button" icon={ShoppingCartSimple} hover="up" />
	<Button href="#button" icon={ArrowFatDown} hover="shadow" variant="outline" />
	<Button href="#button" icon={ArrowRight} hover={{c:'b800', bgc: 'b100'}} variant="ghost" />
</Cluster>

`isGrid`でアイコンを端に寄せる

ボタンに幅を指定した時に、isGridを併用することでアイコンを端に寄せることもできます。
([data-icon-position="edge"]とかdata属性にすべきか...？prop名は要検討)

isGrid

Button Button Button

リサイズ可能エリアです ↑

...

Prop: `iconOffset`

iconOffsetの指定(data-icon-offset属性) によって、translateでアイコンの位置を微調整できます。

アイコン側の余白が広く見えてしまう場合などに活用してください。

iconOffsetの比較

Button Button

リサイズ可能エリアです ↑

<Button href="#button" iconOffset="0%" rightIcon={<ArrowRight />}>Button</Button>
<Button href="#button" iconOffset="10%" rightIcon={<ArrowRight />}>Button</Button>

もう少しわかりやすい比較

デフォルト(0%)offset:25%offset:50%

リサイズ可能エリアです ↑

...

サイズの調整

専用のPropはいまのところなし。p, fz, w などの基本Propで調整できます。

小さいサイズのボタンテスト

Button Button

リサイズ可能エリアです ↑

<Cluster gap={20}>
	<Button href="#button" variant="ghost" keycolor="main" fz="xs" p={10} hover={{ bgc: "b100" }}>Button</Button>
	<Button href="#button" keycolor="purple" fz="xs" p={10} hover="reverse" leftIcon={ArrowRight}>Button</Button>
	<Button href="#button" fz="xs" p={20} hover="fade" icon={ShoppingCartSimple} />
</Cluster>

hover="reverse"

Button用のhoverユーティリティ。

基本的には、 cとbgcを入れ替えるようになっている
fill(デフォルト) で使うと、文字色とボーダー色がホバー前の背景色になり、背景色が透明に。
outline, ghost で使うと、文字色 → --c--filled, 背景色 → ホバー前の文字色に。

テキストカラー反転してるようなエリアでは、ホバー時の文字色を明示的に指定してあげないと、真っ白になったり真っ黒になったりする。

hover="reverse"

Fill Outline Ghost

リサイズ可能エリアです ↑

<Cluster gap={20}>
	<Button href="#button" hover="reverse">Fill</Button>
	<Button href="#button" hover="reverse" variant="outline">Outline</Button>
	<Button href="#button" hover="reverse" variant="ghost">Ghost</Button>
</Cluster>