Skip to content

Link

const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<LinkHandle>>;

Focusable hyperlink for terminal UIs.

Renders link text (or custom children) and opens the URL in the default browser when the user presses Space or Enter. Focusable by default and can be disabled.

<Link href="https://example.com">Visit Example</Link>
// Minimal — displays the URL as text
<Link href="https://github.com" />
// Styled link
<Link
href="https://docs.example.com"
style={{ color: "blue", underline: true }}
focusedStyle={{ color: "cyan", bold: true }}
>
Documentation
</Link>

PropertyTypeDescription
children?ReactNodeCustom content. When absent, the href is displayed as text.
disabled?booleanWhen true, the link is skipped in the focus order and ignores input.
focusable?booleanWhether the link is focusable (default: true).
focusedStyle?StyleStyle applied when the link is focused (merged with style).
hrefstringThe URL to open when the link is activated.
onOpen?() => voidCalled after the URL has been opened.
style?StyleBase style for the link container.

Handle for Link

blur(): void;

Programmatically blur (unfocus) this element

void

FocusableHandle.blur


focus(): void;

Programmatically focus this element

void

FocusableHandle.focus


scrollIntoView(options?): void;

Scroll the nearest parent ScrollView to make this element visible. Behaves like the DOM Element.scrollIntoView() method. No-op if the element is not inside a ScrollView.

ParameterTypeDescription
options?ScrollIntoViewOptionsAlignment options (default: { block: "nearest" })

void

const inputRef = useRef<InputHandle>(null);
// Minimal scroll — just enough to make it visible
inputRef.current?.scrollIntoView();
// Center the element in the viewport
inputRef.current?.scrollIntoView({ block: "center" });

FocusableHandle.scrollIntoView

PropertyModifierTypeDescriptionInherited from
isFocusedreadonlybooleanWhether this element is currently focusedFocusableHandle.isFocused