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