Icon Button

Icon button renders an icon within in a button


IconButton composes the Button component except that it renders only an icon.

Since IconButton only renders an icon, you must pass the aria-label prop, so screen readers can give meaning to the button.


import { IconButton } from "@nature-ui/core";
<IconButton aria-label="Search database" icon={<SearchIcon />} />

Button Colors#

The IconButton component accepts most of the props from the Button component, so we can use color prop to change the color of the button.

className="bg-blue-700 text-white"
aria-label="Search database"
icon={<SearchIcon />}

Button Sizes#

Like the Button component, pass the size prop to change the size of the button.

className="bg-purple-600 text-white"
aria-label="Call Segun"
icon={<PhoneIcon />}

Button Variants#

Like the Button component, pass the variant prop to change the style of the button.

aria-label="Send email"
icon={<EmailIcon />}

With custom icon#

You can also use icons from popular libraries like react-icons and just pass it into the button.

aria-label="Call Divine"
fontSize: "20px",
icon={<MdPhone />}


sizesm, md, lgmdSpecifies an explicit icon size instead of the default value.
iconstringnullThe icon to be used. Refer to the Icons section of the docs for the available icon options.
isRoundbooleanfalseIf true, the button will be perfectly round. Else, it'll be slightly round.
aria-label (required)stringA11y: A label that describes the button.
variantoutline, ghost, unstyled , link , solidsolidThe variant of the button style to use.
colorstringgrayThe color scheme of the button.
isDisabledbooleanIf true, the button will be disabled.
isLoadingbooleanIf true, the button will show a spinner.