Icon Button

Usage#

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#

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.

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

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

Button Variants#

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

<IconButton
  variant="outline"
  className="text-orange-500"
  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.

<IconButton
  variant="outline"
  className="text-teal-600"
  aria-label="Call Divine"
  css={{
    fontSize: "20px",
  }}
  icon={<MdPhone />}
/>

Props#