TextLink
Text links take users to another place in the application, and usually appear within or directly following a sentence.
import { TextLink, TextLinkButton, useTextLink } from '@balance-web/text-link';Usage
Color
Size
This will render a component where the text-link font size is determined by the parent component.
The font-size is inherited from the parent Text component.
External link
Links can be set to open in a new tab by using the native anchor prop target=_blank.
An ExternalLinkIcon will be renderred after text when target="_blank based on the text size.
Note: External links are styled differently based on their
:visitedstate.
Custom link
This component renders a native anchor element by default, which can be
customised via the linkComponent prop on the Core component.
Building your own link-styled element
useTextLink exposes the same styling TextLink uses internally as a hook,
for the rare case you need text-link styling on an element TextLink itself
can't render (for example, a non-anchor interactive element).
Text link button
Even though it looks like a TextLink, this is actually a semantic button.
Disabled
The disabled prop can be used to disabled a TextLinkButton
Note
This component must be nested within a Text or Heading component.