IconLinkButton

The IconLinkButton component is a special link that appears like the IconButton component. It’s a mix of the LinkButton and IconButton components. It shares similar styles, sizes, and props as well as the link attributes like href, target, and rel. However, since it will display an icon, it will always keep the 1:1 ratio.

• Storybook
• StackBlitz

Usage

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

import { Icon, download } from "@wordpress/icons";
import { IconLinkButton } from "@syntatis/kubrick";

<IconLinkButton href="/file.zip" label="Download">
  <Icon icon={download} />
</IconLinkButton>;

Caution

Since the link would only show an icon, you will need to provide the label prop to the IconLinkButton 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.

Tip

Please refer to our guide on Icons for more information on how to use icons with the component in your app.

Variants

The IconLinkButton component comes with different variations. The default variant is primary, but you can secondary to match the button function. To change the variation, use the variant prop.

<IconLinkButton
  href="https://wordpress.org"
  label="WordPress"
  variant="secondary"
>
  <Icon icon={wordpress} />
</IconLinkButton>

Sizes

Aside of changing the component variants, you can also change the size to match the size of the surrounding elements or its significance. It comes with a couple of sizes, small (default) and large. To change the size, use the size prop.

<IconLinkButton
  href="https://wordpress.org"
  label="Download"
  size="small">
  <Icon icon={wordpress} />
</IconLinkButton>

Styles

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

Selector	Description
root	The root element of the link.

Note

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

Events

The IconLinkButton 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
onHoverChange	Triggered when the link is hovered. The function callback will receive a boolean value indicating if the link is hovered.
onFocusChange	Triggered when the link receives or loses focus. The callback function will receive a boolean value indicating if the link is focused.

Let’s assume you have an app with the IconLinkButton. You want to animate the icon when the button receives focus. To do this, you can use the onFocusChange event:

import { useState } from "react";
import { IconLinkButton } from "@syntatis/kubrick";
import { Icon, wordpress } from "@wordpress/icons";

function App() {
  const [isFocused, setIsFocused] = useState(false);

  return (
    <IconLinkButton
      href="https://wordpress.org"
      label="WordPress"
      onFocusChange={setIsFocused}
      className={isFocused ? "animate" : ""}
    >
      <Icon icon={wordpress} />
    </IconLinkButton>
  );
}