| 1 | ---
|
| 2 | title: Text Link
|
| 3 | storybookPath: navigation-textlink--default
|
| 4 | isExperimentalPackage: true
|
| 5 | ---
|
| 6 |
|
| 7 | **NOTE:** These components must be nested within a [Text](/package/text) or
|
| 8 | [Heading](/package/heading) component.
|
| 9 |
|
| 10 | ## TextLink
|
| 11 |
|
| 12 | Text links take users to another place in the application, and usually appear
|
| 13 | within or directly following a sentence. Styled to resemble a hyperlink.
|
| 14 |
|
| 15 | ```jsx live
|
| 16 | <Text>
|
| 17 | This is some text containing a <TextLink href="#">text link</TextLink>
|
| 18 | </Text>
|
| 19 | ```
|
| 20 |
|
| 21 | ### Examples
|
| 22 |
|
| 23 | #### Size
|
| 24 |
|
| 25 | The font-size is inherited from the parent [Text](/package/text) component.
|
| 26 |
|
| 27 | ```jsx live
|
| 28 | <Text size="small">
|
| 29 | A <TextLink href="#">text link</TextLink> inheriting the parent's “small”
|
| 30 | font-size
|
| 31 | </Text>
|
| 32 | ```
|
| 33 |
|
| 34 | #### Custom link
|
| 35 |
|
| 36 | This component renders a native anchor element by default, which can be
|
| 37 | customised via the `linkComponent` prop on the [SparkProvider](#todo) component.
|
| 38 |
|
| 39 | ### Props
|
| 40 |
|
| 41 | <PropsTable displayName="TextLink" />
|
| 42 |
|
| 43 | The `TextLink` component also extends native HTML `a` anchor props and are not
|
| 44 | listed here.
|
| 45 |
|
| 46 | ## TextLinkButton
|
| 47 |
|
| 48 | Even though it looks like a text link, this is actually a semantic button.
|
| 49 |
|
| 50 | ```jsx live
|
| 51 | <Text>
|
| 52 | <TextLinkButton>Visually a link, with button semantics</TextLinkButton>
|
| 53 | </Text>
|
| 54 | ```
|
| 55 |
|
| 56 | ### Props
|
| 57 |
|
| 58 | <PropsTable displayName="TextLinkButton" />
|
| 59 |
|
| 60 | The `TextLinkButton` component also extends native HTML `span` props and are not
|
| 61 | listed here.
|
| 62 |
|
| 63 | [data-attribute-map]:
|
| 64 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|