Link

Links are used as navigational elements, and can be used on their own, or inline with text.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Example


                                                        
                                                        
                                                            import Link from '@optimus-web/core';
                                                        
                                                        Inline <Link href="https://mews.design" target="_blank">link</Link> in a sentence
                                                        
                                                        
                                                            
Storybook failed to load. Please connect to the VPN to access.

API

Name

Description

Type

Default

as?

Defines which element will be render ultimately in the DOM

React.ElementType

"a"

inherit?

Defines if the Link should inherit the color of the parent component

boolean

false

overflowWrap?

Controls the overflow-wrap CSS property used for preventing text from overflowing.

'normal' | 'break-word'

undefined

size?

Defines the size of the link

'normal' | 'small'

normal

standalone?

Defines if the Link should render as a block element. Also modifies the underline styling.

boolean

false

underline?

Defines if the Link should render with or without underline

boolean

true

wordBreak?

Controls the word-break CSS property used for preventing text from overflowing.

'break-all' | 'break-word' | 'normal'

normal

variant?

Defines the variant for the Link. Basic variant is only available in standalone mode

LinkVariant

default

icon?

Defines if the Link should render a icon after the content

IconName

undefined

strong?

Defines if the Link renders with strong font size. Only available in standalone mode.

boolean

false

disabled?

Defines if the Link should render disabled.

boolean

false