Shows clickable text for user navigation. The Link component works exactly like the native a element, except for a few additional props for customization.


Use by importing the Link component from @avocado-ui/react.

New Link


The Link component comes in 4 basic types - default, solid, outline, and ghost. You can use any one of them by passing their values into the type prop.

New LinkNew LinkNew LinkNew Link


The shape prop in Link works like that of the Button component and can take in 3 basic shape types - square, curve and round.

New LinkNew LinkNew Link


The Link component comes in 3 basic sizes - sm, md and lg. You can pass any of these to the size prop and the Link component will adjust accordingly.

New LinkNew LinkNew Link

It's very common to pair the Link component with icons. You can do this with the prefixIcon and suffixIcon prop. You'll have to set this to a React.ReactNode component, but it's more advisable to use an icon. Here's it working with feather icons.

New LinkNew LinkNew Link

Props Table

sizesize of Linksm, md, lgmd
shapeshape of Linksquare, round, curvedefault
typetype of Link componentdefault, ghost, outline, solidcurve
prefixIconicon to the left of Link componentReactNode-
suffixIconicon to the right of Link componentReactNode-