IconButton

The IconButton component is used to render a button with an icon as the content. It works like to the Button component. It has the variations and the sizes, except the size will always has a 1:1 ratio. It is typically used when space is or may be limited such as in a toolbar, a dialog, or a navigation.

• Storybook
• StackBlitz

Usage

To use it in your app, import the IconButton from the package. You will also need an icon library for the icon. We recommend the official WordPress icon component @wordpress/icons.

import { Icon, cloudUpload } from "@wordpress/icons";
import { IconButton } from "@syntatis/kubrick";

<IconButton label="Upload">
  <Icon icon={cloudUpload} />
</IconButton>;

Caution

Since the button will only show an icon, you will need to provide the label prop to the IconButton component to make it accessible for the screen reader. The label will be added as the aria-label attribute for the button that will be read by screen readers.

Types

Similar to the Button component, the IconButton component will behave as the button type, by default. You can change the button type using the type prop, for example, to render it as a submit button:

<IconButton
  label="Upload"
  type="submit">
  <Icon icon={cloudUpload} />
</IconButton>

Disabled

You can also make the button disabled with the isDisabled prop. This is useful when the button shouldn’t be clickable, such as when a form is incomplete or the user lacks permission to perform an action.

<IconButton
  label="Upload"
  isDisabled>
  <Icon icon={cloudUpload} />
</IconButton>

Variants

The IconButton component comes with two variants, primary (default) and secondary, that you can choose from. You can use the variant prop change it to the secondary variant to match the button’s role.

<IconButton
  label="Upload"
  variant="secondary">
  <Icon icon={cloudUpload} />
</IconButton>

Sizes

Aside of the variants, the IconButton component also comes with different sizes that you can choose from. You can change it to small, large, and hero to match its significance or the surrounding sizes of the button.

<IconButton
  label="Upload"
  size="small">
  <Icon icon={cloudUpload} />
</IconButton>

Styles

The IconButton component has static classes, prefixed with .kubrick-IconButton-. You can use these static classes to select and customize the component and its elements.

Selector	Description
root	The root element of the button.

Note

Please refer to the Styles Guides to learn more about using static classes.

Events

The IconButton component will emit some events on user interactions. You can handle these events by passing a function as a callback to the following props:

Event	Description
onPress	Triggered when the button is clicked. The callback function will receive the click event as an argument.
onHoverChange	Triggered when the button is hovered. The callback function will receive a boolean indicating if the button is hovered.
onFocusChange	Triggered when the button receives or loses focus. The callback function will receive a boolean indicating if the button is focused.

Let’s assume you have an app with an IconButton. When the user hover the button, you want to change the icon. You can do this by using the onHoverChange prop, for example:

import { useState } from "react";

function App() {
  const [isHovered, setIsHovered] = useState(false);

  <IconButton
    label="Upload"
    onHoverChange={setIsHovered}>
    <Icon icon={isHovered ? cloudUpload : cloudUploadAlt} />
  </IconButton>;
}