Link

A versatile component for creating styled hyperlinks and navigation elements with hover states and accessibility features.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Inline Links

Embed links directly inside supporting copy to guide readers toward related resources.

Loading demo…

import

 

{

 

Block

,

 

Card

,

 

Link

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

resources

=

 

[

  

{

href

:

 

'#brand'

,

label

:

 

'brand guidelines'

 

}

,

  

{

href

:

 

'#voice'

,

label

:

 

'voice and tone guide'

 

}

,

  

{

href

:

 

'#releases'

,

label

:

 

'release checklist'

 

}

,

]

;

 

const

 

[

brandGuide

,

voiceGuide

,

releaseChecklist

]

 

=

resources

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

"md"

>

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"secondary"

>

          

Use

 

`Link`

inline with body copy to direct readers to additional guidance without breaking the flow of text

.

        

</Text

>

        

<Text

 

size

=

"sm"

>

          

Before

publishing

,

review the

{

' '

}

          

<Link

 

href

=

{

brandGuide

.

href

}

>

{

brandGuide

.

label

}

</Link

>

,

consult our

{

' '

}

          

<Link

 

href

=

{

voiceGuide

.

href

}

>

{

voiceGuide

.

label

}

</Link

>

,

and confirm each launch in the

{

' '

}

          

<Link

 

href

=

{

releaseChecklist

.

href

}

>

{

releaseChecklist

.

label

}

</Link

>

.

        

</Text

>

      

</Block

>

    

</Card

>

  

)

;

}

External Destinations

Use the external prop when pointing to destinations outside the current shell.

Loading demo…

import

 

{

 

Block

,

 

Card

,

 

Link

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

references

=

 

[

  

{

href

:

'https:

//reactnative.dev', label: 'React Native documentation', color: 'primary' },

  

{

href

:

'https:

//expo.dev', label: 'Expo documentation', color: 'secondary' },

  

{

href

:

 

'mailto:support@example.com'

,

label

:

 

'Email support'

,

color

:

 

'gray'

 

}

,

]

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

"md"

>

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"secondary"

>

          

Set

 

`external`

to ensure the link opens outside the app shell and receives the proper accessibility attributes

.

        

</Text

>

        

{

references

.

map

(

(

resource

)

 

=>

 

(

          

<Link

 

key

=

{

resource

.

href

}

 

href

=

{

resource

.

href

}

external

color

=

{

resource

.

color

}

>

            

{

resource

.

label

}

          

</Link

>

        

)

)

}

      

</Block

>

    

</Card

>

  

)

;

}

Size Options

Demonstrate how the size token scales link typography and spacing.

Loading demo…

import

 

{

 

Block

,

 

Link

,

 

Row

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

 

SIZES

 

=

 

[

'xs'

,

 

'sm'

,

 

'md'

,

 

'lg'

,

 

'xl'

,

 

'2xl'

,

 

'3xl'

]

as

const

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Row

 

align

=

"center"

 

gap

=

"lg"

 

wrap

=

"wrap"

>

      

{

SIZES

.

map

(

(

size

)

 

=>

 

(

        

<Block

 

key

=

{

size

}

 

align

=

"center"

>

          

<Link

 

size

=

{

size

}

 

href

=

"#"

>

Link

</Link

>

          

<Text

 

variant

=

"small"

>

{

size

}

</Text

>

        

</Block

>

      

)

)

}

    

</Row

>

  

)

;

}

Visual Variants

Compare persistent and hover-only underlines alongside subtle variants.

Loading demo…

import

 

{

 

Block

,

 

Card

,

 

Link

,

 

Text

 

}

 

from

 

'@platform-blocks/react-ui-library'

;

 

const

linkVariants

=

 

[

  

{

label

:

 

'Default underline'

,

variant

:

 

'default'

as

const

,

description

:

 

'Underline is always visible for maximum affordance.'

 

}

,

  

{

label

:

 

'Hover underline'

,

variant

:

 

'hover-underline'

as

const

,

description

:

 

'Underline appears on hover for denser layouts.'

 

}

,

  

{

label

:

 

'Subtle primary'

,

variant

:

 

'subtle'

as

const

,

color

:

 

'primary'

,

description

:

 

'Muted style that still matches the brand palette.'

 

}

,

  

{

label

:

 

'Subtle gray'

,

variant

:

 

'subtle'

as

const

,

color

:

 

'gray'

,

description

:

 

'Pair with neutral layouts or footers.'

 

}

,

]

;

 

export

 

function

 

Demo

(

)

 

{

  

return

 

(

    

<Card

 

p

=

"md"

>

      

<Block

>

        

<Text

 

size

=

"sm"

 

color

=

"secondary"

>

          

Choose

a

`variant`

that matches the surrounding density

while

keeping the link discoverable

.

        

</Text

>

        

{

linkVariants

.

map

(

(

entry

)

 

=>

 

(

          

<Block

 

key

=

{

entry

.

label

}

>

            

<Link

 

href

=

"#"

 

variant

=

{

entry

.

variant

}

 

color

=

{

entry

.

color

}

>

{

entry

.

label

}

</Link

>

            

<Text

 

size

=

"xs"

 

color

=

"secondary"

>

{

entry

.

description

}

</Text

>

          

</Block

>

        

)

)

}

      

</Block

>

    

</Card

>

  

)

;

}

Scan to open this page on your phonereact-ui-library.com/components/Link

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

ComponentsChartsHooks

Docs

Getting StartedLocalizationllms.txt

Resources

FAQChangelogAccessibilitySitemap