LinkButton

The LinkButton component is similar to the Link component. It creates a a element, but it will appear like the Button component; it will have similar styles, variations, and sizes as the Button component.

• Storybook
• StackBlitz

Usage

To use it in your app, import LinkButton from the package:

import { LinkButton } from "@syntatis/kubrick";

Then, add it in your app as you would with a native HTML a element by passing the href prop and the label:

<LinkButton href="https://wordpress.org">WordPress</LinkButton>

Similar to the Link component, the LinkButton also inherits several native a element attributes, such as the target and rel attribute. You can pass these attributes as props directly to the component:

<LinkButton
  href="/page"
  target="_blank"
  rel="noopener noreferrer">
  WordPress
</LinkButton>

Variants

The LinkButton component comes with a couple of variants. The default variant, is primary. You can use the variant prop to change the appearance, for example, to the secondary variant:

<LinkButton
  href="https://wordpress.org"
  variant="secondary">
  WordPress
</LinkButton>

Sizes

Similar to the Button component, the LinkButton component also comes with a couple of sizes. You can use the size prop to change the button size to the small, large, and hero size, for example:

<LinkButton
  href="https://wordpress.org"
  size="large">
  WordPress
</LinkButton>

Affix

To add any valid elements before and after the label, you can pass the prefix and suffix props to the LinkButton component . This may be useful if you need to show an icon or context for the link.

Let’s assume you’d like to show an icon after the label to show that the link will open in a new tab. You can use the suffix prop, as follows:

<LinkButton
  href="https://wordpress.org"
  target="_blank"
  rel="noopener noreferrer"
  prefix={<Icon name={wordpress} />}
>
  WordPress
</LinkButton>

Styles

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

Selector	Description
root	The root element of the link.
prefix	The element that wraps the prefix content.
suffix	The element that wraps the suffix content.
infix	The element that wraps the link label when the prefix or suffix is present.

Note

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

Events

The LinkButton 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 function callback will receive a boolean value indicating if the link is focused.

Let’s assume you have an app with the LinkButton. You want to animate the icon when the button receives focus. To do this, you can use the onFocusChange prop to listen when the component receives or loses focus state.

import { useState } from "react";

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

  return (
    <LinkButton
      href="/file.zip"
      onFocusChange={setIsFocused}
      className={isFocused ? "animate" : ""}
      suffix={<Icon icon={download} />}
    >
      Download
    </LinkButton>
  );
}