Button
このページは現在調整中です
Lism UI (@lism-css/ui) はまだ準備中です。
ボタン型リンクを表示できるコンポーネントです。
↓
Preview
<Flex layout="cluster" g="15"> <Button href="###" variant="fill"> Button </Button> <Button href="###" variant="outline"> Outline </Button></Flex>How to use
@lism-css/ui パッケージでButton(.c--button)として提供しています。
Import
import { Button } from '@lism-css/ui/react';Props
| プロパティ | 説明 |
|---|---|
variant | c--button--{variant} クラスを出力します。fill,outlineの2種類のスタイルをこの例では用意しています。 |
ソースコード
ソースコードは GitHub で公開しています。
Examples
↓
Buttonの使用例<Flex g="15"> <Button href="###">Button</Button> <Button href="###" bgc="brand" bdrs="10">Button</Button> <Button href="###" bgc="#d13d5e" bdrs="99"> <Icon icon="cart" />Button </Button></Flex>variant: outline
↓
outlineの使用例<Flex g="15"> <Button href="###">Button</Button> <Button href="###" variant="outline" c="brand" bdrs="10">Button</Button> <Button href="###" variant="outline" c="#d13d5e" bdrs="99"> <Icon icon="cart" />Button </Button></Flex>アイコンを使う例
↓
アイコンを使う例
<Cluster g="15"> <Button href="###" g="5" bdrs="10"> <Icon icon="cart" style={{ translate: '-25% 0' }} /> <span>Button</span> </Button> <Button href="###" variant="outline" g="5" bdrs="10"> <span>Button</span> <Icon icon={ArrowRightIcon} style={{ translate: '25% 0' }} /> </Button> <Button href="###" w="fit" px="10" py="10" lh="1" bdrs="10"> <Icon icon={{ as: ShoppingCartSimpleIcon, weight: 'fill' }} fz="l" /> </Button></Cluster>サイズの調整
↓
サイズの調整
<Button href="###" w="fit" bdrs="10"> Button</Button><Button href="###" max-w="12em" py="15" fz="l" bdrs="10"> Button</Button>Gridでアイコンを端に寄せる
layout='grid'を指定すると gridレイアウト（.l--gridクラス）に切り替えることができます。
これにより、アイコンを端に寄せるレイアウトを組むこともできます。
↓
Preview
<Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <Icon icon="cart" /> <span>Button</span></Button><Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button><Button href="###" layout="grid" max-w="20em" py="15" bdrs="10" hov="neutral"> <Icon icon="cart" /> <span>Button</span> <Icon icon={ArrowRightIcon} /></Button>Opt-in
hov="reverse"
ホバー時に、fill,outlineが入れ替わるような -hovクラスを追加する例を紹介します。
↓
例
.-hov\:reverse { --hov-c: var(--bgc); --hov-bgc: var(--c); &:where(.c--button--fill) { --hov-bgc: transparent; } &:where(.c--button--outline) { --hov-c: var(--base); } @media (any-hover: hover) { &:hover { background-color: var(--hov-bgc) !important; color: var(--hov-c) !important; } }}Only lism-css
@lism-css/uiを使用せずに、lism-css のみで Button を構築するコード例を紹介します。
↓
Preview
<Flex g="15"> <Link href="###" d="inline-flex" w="fit" td="none" c="base" bgc="text" lh="s" py="10" px="20" bdrs="20" hov="-o">Button</Link> <Link href="###" d="inline-flex" w="fit" td="none" c="inherit" bd lh="s" py="10" px="20" bdrs="20" hov="-o">Button</Link></Flex><Grid as="a" href="###" gtc="1em 1fr 1em" ji="center" ai="center" px="15" py="10" g="30" w="16rem" td="none" bgc="text" c="base" bdrs="20" hov="neutral"> <Lism as="span" gc="2">Button</Lism> <Icon icon={ArrowRightIcon}/></Grid>