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

Button

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

↓
Preview
Button Outline
リサイズ可能 
<Flex variant='cluster' g='20'>
  <Button href='###' variant='fill'>Button</Button>
  <Button href='###' variant='outline'>Outline</Button>
</Flex>

Import

ソースコードを手動でコピー&ペーストしてご利用ください。

Props

プロパティ説明
variantb--button--{variant} クラスを出力します。fill,outlineの2種類のスタイルを用意しています。
layoutButtonを構成するレイアウト用コンポーネントを指定できます。デフォルトはLismです。

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' ai='c' g='10' bdrs='1'>
    <Icon icon='cart' />
    <span>Button</span>
  </Button>
  <Button href='###' variant='outline' ai='c' 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' ai='c' g='10' w='fit' fz='s' bdrs='2'>
  <Icon icon='cart' />
  <span>Button</span>
</Button>
<Button href='###' variant='fill' d='f' maxW='25rem' ai='c' jc='c' g='10' fz='l' py='20' px='30' bdrs='2'>
  <Icon icon='cart' />
  <span>Button</span>
</Button>

Opt-in

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

gridレイアウトを使用し、アイコンを端に寄せるレイアウトを組むこともできます。

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

hov="reverse"

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

次のようなCSSを追加してください。

.-hov\:reverse {
  --hov-c: var(--bgc);
  --hov-bgc: var(--c);
  &:where(.b--button--fill) {
    --hov-bgc: transparent;
  }
  &:where(.b--button--outline) {
    --hov-c: var(--c--base);
  }
  &: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>

背景がある時の注意点

variant が outline の時、ホバー時の文字色 が var(--c--base)へ変化します。

これにより、テキストカラーの白黒が反転してるようなエリアでは、期待通りの動作にならないことに注意してください。

-hov:reverseは使わず、ホバー時の色を明示的に指定して微調整が必要です。

↓
色が塗り粒されてしまう例とその回避方法 (ライトモードで確認してください）

NG:

Button

OK:

Button 
<Frame hasGutter py='50' pos='r' c='white'>
  <Media isLayer src='/img/img-3.jpg' alt='' width='960' height='640' z='-1'/>
  <Layer bgc='black:50%' z='-1'/>
  <Flex variant='cluster' g='20'>
    <Text>NG:</Text>
    <Button href='###' c='white' hov='reverse' variant='outline'>Button</Button>
  </Flex>
  <Spacer h='50' />
  <Flex variant='cluster' g='20'>
    <Text>OK:</Text>
    <Button href='###' c='white' hov={[{ bgc:'white', c:'black' }]} variant='outline'>Button</Button>
  </Flex>
</Frame>