Lism CSS
Docs
検索

Button

ボタン型リンクを表示できるコンポーネントです。

Overview

↓
Preview
ButtonOutline
<Flex layout="cluster" g="15">
  <Button href="###" variant="fill">
    Button
  </Button>
  <Button href="###" variant="outline">
    Outline
  </Button>
</Flex>

Styles

Button のベーススタイルは、以下のCSSで定義されています。

_style.css 
@layer lism-block {
  .b--button {
    --c: var(--base);
    --bgc: var(--text);
    /* var(--bgc) にすると -hov:-bgc 等で背景だけ変えた時にボーダーが元の色で縁として残る */
    --bdc: transparent;
    --bdw: 1px;
    --hl: var(--hl--s);

    display: inline-flex;
    color: var(--c);
    background-color: var(--bgc);
    gap: 0.4em;
    padding: 0.5em 0.875em;
    text-decoration: none;

    /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
    border: solid var(--bdw) var(--bdc);

    /* flex / grid 両方に対応 */
    place-content: center;
    place-items: center;

    /* l--gridを使用する場合の追加スタイル */
    grid-template-columns: minmax(1em, auto) 1fr minmax(1em, auto);
  }
  .b--button--outline {
    --c: var(--text);
    --bgc: transparent;
    --bdc: var(--c);
  }

  :where(.b--button) > .a--icon {
    scale: 1.05;
  }

  :where(.b--button.l--grid) > :not(.a--icon) {
    grid-column: 2;
  }
}

ソースコード全体は GitHub で公開しています。

How to use

@lism-css/ui パッケージでButton(b--button)として提供しています。

Import

import { Button } from '@lism-css/ui/react';

Props

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

Examples

↓
Buttonの使用例
ButtonButtonButton
import { ArrowRightIcon } from '@lism-css/icons/react';


<Flex g="15">
  <Button href="###">Button</Button>
  <Button href="###" bgc="brand" bdrs="10">Button</Button>
  <Button href="###" bgc="#d13d5e" bdrs="99">
    <Icon icon={ArrowRightIcon} />Button
  </Button>
</Flex>

variant: outline

↓
outlineの使用例
ButtonButtonButton
import { ArrowRightIcon } from '@lism-css/icons/react';


<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={ArrowRightIcon} />Button
  </Button>
</Flex>

アイコンを使う例

↓
アイコンを使う例
ButtonButton
import { ArrowRightIcon } from '@lism-css/icons/react';


<Cluster g="15">
  <Button href="###" g="5" bdrs="10">
    <Icon icon={ArrowRightIcon} 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" hl="0" bdrs="10">
    <Icon icon={{ as: ShoppingCartSimpleIcon, weight: 'fill' }} fz="l" />
  </Button>
</Cluster>

スタイルの調整

↓
例
Button 
<Button href="###" fz="l" bdrs="99" px="25">Button</Button>

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

layout='grid'を指定すると gridレイアウト（l--gridクラス）に切り替えることができます。
これにより、アイコンを端に寄せるレイアウトを組むこともできます。

↓
Preview
ButtonButtonButton
import { ArrowRightIcon } from '@lism-css/icons/react';


<Button href="###" layout="grid" max-w="20em" bdrs="10" hov="-bgc">
  <Icon icon={ArrowRightIcon} />
  <span>Button</span>
</Button>
<Button href="###" layout="grid" max-w="20em" bdrs="10" hov="-bgc">
  <span>Button</span>
  <Icon icon={ArrowRightIcon} />
</Button>
<Button href="###" layout="grid" max-w="20em" bdrs="10" hov="-bgc">
  <Icon icon={ArrowRightIcon} />
  <span>Button</span>
  <Icon icon={ArrowRightIcon} />
</Button>

Without @lism-css/ui

@lism-css/uiを使用せずに、lism-css のみで Button を構築するコード例を紹介します。

↓
Preview
ButtonButton
Button 
<Flex g="15">
  <Link href="###" d="inline-flex" td="none" c="base" bgc="text" hl="s" py="10" px="20" bdrs="20" hov="-o">Button</Link>
  <Link href="###" d="inline-flex" td="none" c="inherit" bd hl="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="-bgc">
  <Lism as="span" gc="2">Button</Lism>
  <Icon icon={ArrowRightIcon}/>
</Grid>

Opt-in Styles

hov="reverse"

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

↓
例
ButtonButton
.-hov\:reverse {
  --hov-c: var(--bgc);
  --hov-bgc: var(--c);
  &:where(.b--button--fill) {
    --bdc: var(--bgc);
    --hov-bgc: transparent;
  }
  &:where(.b--button--outline) {
    --hov-c: var(--base);
  }
  @media (any-hover: hover) {
    &:hover {
      background-color: var(--hov-bgc) !important;
      color: var(--hov-c) !important;
    }
  }
}

© 2026 Lism CSS.