Link

Href

    <>
      Go to {''}
      <Link href="https://flodesk.com" target="_blank">flodesk.com</Link>
    </>
  

Variants

    <Arrange gap="m">
      <Link variant="neutral" href="https://flodesk.com" target="_blank">Neutral</Link>
      <Link variant="subtle" href="https://flodesk.com" target="_blank">Subtle</Link>
    </Arrange>
  

Text styles

To specify the color, size, or weight, wrap the Link with the Text component.

    <>
      <Text color="green" size="xxl" weight="medium">
        Go to {''}
        <Link href="https://flodesk.com" target="_blank">flodesk.com</Link>
      </Text>
      <br />
      <Text size="s">
        Go to {''}
        <Link href="https://flodesk.com" target="_blank">flodesk.com</Link>
      </Text>
    </>
  

Tag

    <Stack>
      <Link href="https://flodesk.com" target="_blank">render "a"</Link>
      <br />
      <br />
      <Link tag="button" onClick={() => console.log('clicked')}>render "button"</Link>
    </Stack>
  

Props

Name

Type

Default

tag

oneOf

'button' 'a' 'span'

'a'

variant

oneOf

'neutral' 'subtle'

'neutral'

children

node

href

string

target

string

onClick

func