TextLink

How to get TextLink

import { TextLink } from 'fds/components';

Type: Component

A clickable link, renders an optional Label and Icon before and/or after. Generally used as an inline link within Text.

Props

# Name Type Description
1. [colorName] String

The name of the color to use in the component. FDS has implemented a color palette for all of the components implemented in the library.

When building a custom component, try to use the existing colors as much as possible. Try to find an FDS component which is similar to the component you're building. When using colors this way, you can guarantee your component will use the correct color when the style of the library updates.

The possible values can be found in the example.

  Default value
"text-link-color"
  Related links
2. [href] String

The URL or URL fragment that the hyperlink points to. This will be rendered to the "href" attribute of the anchor element.

  Default value
null
3. [label] String

The human readable label displayed in the component.

  Default value
null
4. [icon] String

The name of the icon displayed in the component.

For more information about the available icon names, check the https://fontawesome.com/v4.7.0/icons/

  Default value
null
5. [iconAfter] String

The name of the icon displayed after the component.

For more information about the available icon names, check the https://fontawesome.com/v4.7.0/icons/

  Default value
null
6. [isBold] Boolean

Whether or not the textual content of the component should be rendered in a bold font weight.

  Default value
false
7. [isDisabled] Boolean

Whether or not the component should be rendered in a disabled state.

  Default value
false
8. [onClick] Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
9. [onRef] Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

10. [size] String

The size of font to render. The possible values are:

  • 's'

  • 'm'

  • 'inherit'

Defaults to 'm'.


  Default value
"m"
11. [target] String

Specifies the browsing context of the hyperlink. This should include the name of the window/tab in which the link should open. This will be rendered to the "target" attribute of the anchor element.

The following values have special meanings (according to the HTML5 spec):

  • _self: Load the URL into the same browsing context as the current one. This is the default behavior.

  • _blank: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.

  • _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.

  • _top: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.

  Default value
"_blank"
12. [tooltipContent] String | ReactElement

The content of the tooltip that is displayed when hovering over the whole component.

  • string: the textual content of the tooltip

  • ReactElement: a React Element (instance of a React Component, usually created with JSX)

13. [userSelect] String

The CSS value for user-select. The possible values are:

  • 'none',

  • 'text'

Defaults to 'text'.

  Default value
"none"

Related links