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={<Plus />} />

Copied!

Change Variant

Editable example

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

Copied!

Change Size

Editable example

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

Copied!

Disable

To disable, set isDisabled to true.

Editable example

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

Copied!

Edit this page on GitHub

PreviousButton NextInput