Buttons

IconButton

A button with an icon.

Import

tsx
import { IconButton } from "@hope-ui/core";

tsx
import { IconButton } from "@hope-ui/core";

Usage

tsx
<IconButton aria-label="Search">
  <SearchIcon />
</IconButton>

tsx
<IconButton aria-label="Search">
  <SearchIcon />
</IconButton>

If you want to create your own icon components check out Hope UI Icon documentation.

Variants

Use the variant prop to change the visual style of the IconButton.

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" variant="default">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="soft">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="outlined">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="plain">
    <SearchIcon />
  </IconButton>
</HStack>

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" variant="default">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="soft">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="outlined">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="plain">
    <SearchIcon />
  </IconButton>
</HStack>

Colors

The colorScheme prop allows changing the color of the IconButton.

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" variant="solid" colorScheme="primary">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="neutral">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="success">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="info">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="warning">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="danger">
    <SearchIcon />
  </IconButton>
</HStack>

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" variant="solid" colorScheme="primary">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="neutral">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="success">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="info">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="warning">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" variant="solid" colorScheme="danger">
    <SearchIcon />
  </IconButton>
</HStack>

The colorScheme prop is ignored when the variant is set to default.

Sizes

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

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" size="xs">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="sm">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="md">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="lg">
    <SearchIcon />
  </IconButton>
</HStack>

tsx
<HStack spacing={4}>
  <IconButton aria-label="Search" size="xs">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="sm">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="md">
    <SearchIcon />
  </IconButton>
  <IconButton aria-label="Search" size="lg">
    <SearchIcon />
  </IconButton>
</HStack>

Loading state

Pass the isLoading prop to show its loading state.

tsx
<IconButton aria-label="Search" isLoading>
  <SearchIcon />
</IconButton>

tsx
<IconButton aria-label="Search" isLoading>
  <SearchIcon />
</IconButton>

You can also change the loader element with the loader prop.

tsx
<IconButton aria-label="Search" isLoading loader={<BeatLoaderIcon boxSize={6} />}>
  <SearchIcon />
</IconButton>

tsx
<IconButton aria-label="Search" isLoading loader={<BeatLoaderIcon boxSize={6} />}>
  <SearchIcon />
</IconButton>

Theming

IconButton renders a Button and uses Button's theming API.

Props

Name	Type	Description	Default value
aria-label*	`string`	A label that describes the button.
variant	`"default" \| "solid" \| "soft" \| "outlined" \| "plain"`	The visual style of the button.	default
colorScheme	`"primary" \| "neutral" \| "success" \| "info" \| "warning" \| "danger"`	The color of the button.	primary
size	`"xs" \| "sm" \| "md" \| "lg"`	The size of the button.	md
isDisabled	`boolean`	Whether the button should be disabled.
isLoading	`boolean`	Whether the button is in a loading state.
loader	`JSX.Element`	Replace the loader component when `isLoading` is true.
children	`JSX.Element`	The icon of the button.