Text size in Link

Hi,

Is it possible to control/set the font/text size in the Link component? Keen to know how it can be done. The docs don’t seem to mention of any attributes that can be set.

Many thanks

Hi @rebx , yes you can wrap the Link component around the Text component and change the font size via the size prop.

<Link href="/your-link">
  <Text as="span" size="small">
    Go here
  </Text>
</Link>

Hi @QuocLieu,

Thanks for your reply. Yes, that works. What if you have a series (4 or more) links and text that you want to change the size of? Any idea how it can be controlled in a group so there’s less clutter in the code?

Cheers

You could create a custom Link component and use that instead:

const SmallLink = ({children, href}) => {
    return <Link href={href}><Text size="small"><{children}</Text></Link>
}

// Usage:
<SmallLink href="/">Link 1</SmallLink>
<SmallLink href="/">Link 2</SmallLink>
<SmallLink href="/">Link 3</SmallLink>
<SmallLink href="/">Link 4</SmallLink>