コンテンツにスキップ
Lism CSS

Button

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

↓
Preview
Button Outline 
<Flex variant='cluster' g='20'>
  <Button href='###' variant='fill'>Button</Button>
  <Button href='###' variant='outline'>Outline</Button>
</Flex>

Import

Section titled “Import”
ソースコードを手動でコピー&ペーストしてご利用ください。 
 import Button from '@/components/lism/Button/index.jsx';

Props

Section titled “Props”
プロパティ説明
variantc--button--{variant} クラスを出力します。fill,outlineの2種類のスタイルをこの例では用意しています。

Usage

Section titled “Usage”

variant='fill'はbgc,variant='outline'はcでカラーを指定します。
（variantがない場合、c,bgc,bdcで自由に指定してください。）

↓
カラー指定
Fill Outline 
<Flex variant='cluster' g='20'>
  <Button href='###' variant='fill' bgc='main'>Fill</Button>
  <Button href='###' variant='outline' c='#64a31c'>Outline</Button>
</Flex>
↓
アイコンを使う例
Button Button 
<Flex variant='cluster' g='20'>
  <Button href='###' variant='fill' g='10' bdrs='1'>
    <Icon icon='cart' />
    <span>Button</span>
  </Button>
  <Button href='###' variant='outline' g='5' bdrs='1'>
    <span>Button</span>
    <Icon icon={ArrowRight} offset='20% 0'/>
  </Button>
</Flex>
↓
アイコンのみのボタン
<Button href='###' variant='fill' w='fit' p='20' bdrs='2'>
  <Icon icon={{as:ShoppingCartSimple, weight:'fill'}} fz='l'/>
</Button>
↓
サイズの調整
Button Button 
<Button href='###' variant='fill' g='10' w='fit' fz='s' bdrs='2'>
  <Icon icon='cart' />
  <span>Button</span>
</Button>
<Button href='###' variant='fill' d='f' maxW='25rem' jc='c' g='10' fz='l' py='20' px='30' bdrs='2'>
  <Icon icon='cart' />
  <span>Button</span>
</Button>

gridでアイコンを端に寄せる

Section titled “gridでアイコンを端に寄せる”

gridレイアウト（.-d:gクラス）を使用し、アイコンを端に寄せるレイアウトを組むこともできるようになっています。
（.c--button:where(.-d\:g)に対してスタイルを当てています）

↓
Preview
Button
Button
Button
リサイズ可能 
<Button href='###' variant='fill' d='g' g='10' maxW='25rem'>
  <Icon icon='cart'/>
  <span>Button</span>
</Button>
<Button href='###' variant='fill' d='g' g='10' maxW='25rem'>
  <span>Button</span>
  <Icon icon={ArrowRight}/>
</Button>
<Button href='###' variant='fill' d='g' g='10' maxW='25rem'>
  <Icon icon='cart'/>
  <span>Button</span>
  <Icon icon={ArrowRight}/>
</Button>

Opt-in

Section titled “Opt-in”

hov="reverse"

Section titled “hov="reverse"”

ホバー時に、fill,outlineが入れ替わるような -hov:クラスを追加する例を紹介します。

↓
次のようなCSSを追加してください。
.-hov\:reverse {
  --hov-c: var(--bgc);
  --hov-bgc: var(--c);
  &:where(.c--button--fill) {
    --hov-bgc: transparent;
  }
  &:where(.c--button--outline) {
    --hov-c: var(--c--base);
  }
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--hov-bgc) !important;
      color: var(--hov-c) !important;
    }
  }
}
↓
例
Button Button 
<Flex g='20'>
  <Button href='###' hov='reverse' variant='fill' jc='c' w='50%'>Button</Button>
  <Button href='###' hov='reverse' variant='outline' jc='c' w='50%'>Button</Button>
</Flex>
↓
color指定ありでのreverseの例
Button Button Button
リサイズ可能 
<Flex variant='cluster' g='20'>
  <Button href='###' hov='reverse' variant='fill' bgc='main'>Button</Button>
  <Button href='###' hov='reverse' variant='outline' c='#64a31c'>Button</Button>
  <Button href='###' hov='reverse' variant='' bgc='base-2' c='link'>Button</Button>
</Flex>