link.md

Link

Link component that provides the required aria role when used under different compositions. It follows the WAI-ARIA Link Pattern for keyboard interactions and accessibilty properties

Table of Contents

• Usage
• Other Examples
• Composition
• Props
  • LinkOptions

Usage

import * as React from "react";

import { Link } from "@adaptui/react";

export const LinkBasic = props => {
  return (
    <Link href="https://timeless.co/" isExternal {...props}>
      Timeless
    </Link>
  );
};

export default LinkBasic;

Other Examples

Composition

• Link uses useCommand

Props

LinkOptions

Name	Type	Description
isExternal	boolean | undefined	Opens the link in a new tab

CommandOptions props

> These props are returned by the other props You can also provide these props.

Name	Type	Description
disabled	boolean | undefined	Determines whether the focusable element is disabled. If the focusableelement doesn't support the native disabled attribute, thearia-disabled attribute will be used instead.
autoFocus	boolean | undefined	Automatically focus the element when it is mounted. It works similarly tothe native autoFocus prop, but solves an issue where the element isgiven focus before React effects can run.
focusable	boolean | undefined	Whether the element should be focusable.
accessibleWhenDisabled	boolean | undefined	Determines whether the element should be focusable even when it isdisabled.This is important when discoverability is a concern. For example:> A toolbar in an editor contains a set of special smart paste functionsthat are disabled when the clipboard is empty or when the function is notapplicable to the current content of the clipboard. It could be helpful tokeep the disabled buttons focusable if the ability to discover theirfunctionality is primarily via their presence on the toolbar.Learn more on Focusability of disabledcontrols.
onFocusVisible	((event: SyntheticEvent<Element, Event>) => voi...	Custom event handler that is called when the element is focused via thekeyboard or when a key is pressed while the element is focused.
clickOnEnter	boolean | undefined	If true, pressing the enter key will trigger a click on the button.
clickOnSpace	boolean | undefined	If true, pressing the space key will trigger a click on the button.