ContextQMD
Back to Chakra Ui

Icon Button

apps/www/content/docs/components/icon-button.mdx

0.3.0-beta758 B
Original Source
<ExampleTabs name="icon-button-basic" />

Usage

jsx
import { IconButton } from "@chakra-ui/react"
jsx
<IconButton aria-label="Search database">
  <LuSearch />
</IconButton>

Examples

Sizes

Use the size prop to change the size of the button.

<ExampleTabs name="icon-button-with-sizes" />

Variants

Use the variant prop to change its visual style

<ExampleTabs name="icon-button-with-variants" />

Color

Use the colorPalette prop to change the color of the button

<ExampleTabs name="icon-button-with-colors" />

Rounded

Set rounded="full" to make the button fully rounded

<ExampleTabs name="icon-button-rounded" />

Props

<PropTable component="Button" part="Button" omit={["loading", "loadingText"]} />