IconButton

IconButton is a component that displays an icon within a button.

Import

import { IconButton } from "@yamada-ui/react"

Copied!

Usage

Editable example

<IconButton icon={<PlusIcon />} />

Copied!

Change Variant

Editable example

<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>

Copied!

Change Size

Editable example

<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>

Copied!

Disable

To disable, set isDisabled to true.

Editable example

<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>

Copied!

Edit this page on GitHub

PreviousButton NextInput