cloudensisdesign system

Button

size="icon" はアイコンだけのボタンです。文字がないため、aria-label で名前を付けます。

import { Button } from "@cloudensis/design-system/components/button";
import { MenuIcon } from "@cloudensis/design-system/icons/menu";

<Button>保存する</Button>
<Button variant="outline">キャンセル</Button>
<Button size="sm">小さいボタン</Button>
<Button variant="outline" size="icon" aria-label="メニュー">
	<MenuIcon />
</Button>

LinkButton

Button と同じ見た目の a 要素です。variant と size も同じものを使えます。

defaultdefault disabledoutlineoutline disabled
smsm disabledoutline smoutline sm disabled

無効にするときは href を外し、aria-disabled="true" を付けます。

import { LinkButton } from "@cloudensis/design-system/components/button";

<LinkButton href="/contact">お問い合わせ</LinkButton>
<LinkButton aria-disabled="true">無効なリンク</LinkButton>