IconButton
IconButtonは、ボタン内にアイコンを表示するコンポーネントです。
インポート
import { IconButton } from "@yamada-ui/react"
使い方
編集可能な例
<IconButton icon={<PlusIcon />} />
バリアントを変更する
編集可能な例
<Wrap gap="md"> <IconButton colorScheme="primary" variant="primary" icon={<PlusIcon />} /> <IconButton colorScheme="secondary" variant="outline" icon={<MinusIcon />} /> <IconButton colorScheme="warning" variant="ghost" icon={<SunIcon />} /> <IconButton colorScheme="danger" variant="link" icon={<MoonIcon />} /> <IconButton variant="unstyled" icon={<CheckIcon />} /> </Wrap>
サイズを変更する
編集可能な例
<Wrap gap="md"> <IconButton colorScheme="primary" size="xs" icon={<PlusIcon />} /> <IconButton colorScheme="secondary" size="sm" icon={<MinusIcon />} /> <IconButton colorScheme="warning" size="md" icon={<SunIcon />} /> <IconButton colorScheme="danger" size="lg" icon={<MoonIcon />} /> </Wrap>
無効にする
無効にする場合は、isDisabledをtrueにします。
編集可能な例
<Wrap gap="md"> <IconButton isDisabled colorScheme="primary" variant="primary" icon={<PlusIcon />} /> <IconButton isDisabled colorScheme="secondary" variant="outline" icon={<MinusIcon />} /> <IconButton isDisabled colorScheme="warning" variant="ghost" icon={<SunIcon />} /> <IconButton isDisabled colorScheme="danger" variant="link" icon={<MoonIcon />} /> <IconButton isDisabled variant="unstyled" icon={<CheckIcon />} /> </Wrap>
GitHubでこのページを編集する