Link

The link serves as a navigational element. It provides a clickable area with styled text and an optional icon, allowing users to access different pages, sections, or external resources within the application.

Basic

Source Code

import { ArrowLaunchOutline } from '@ocean-network-express/magenta-ui/icons';
import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkBasic() {
  return (
    <div className="flex gap-x-24">
      <Link href="#basic">Basic Link</Link>

      <Link href="#basic">
        Link with Icon
        <ArrowLaunchOutline size={'sm'} style={{ marginLeft: '8px' }} />
      </Link>

Color

  • Link supports 2 colors secondary and red and can be changed by passing the color prop.

  • Default color is secondary.

    Source Code

    import { Link } from '@ocean-network-express/magenta-ui/react';
import React from 'react';

export function Color() {
  return (
    <div className="flex gap-x-24">
      <Link color="secondary" href="#">
        Secondary Link (default)
      </Link>

      <Link color="red" href="#">
        Red Link

Sizes

  • Link supports 4 sizes sm, md, lg and responsive and can be changed by passing the size prop.
  • Default size is responsive.

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkSizes() {
  return (
    <div className="flex gap-x-24">
      <Link href="#sizes" size="sm">
        Link size sm
      </Link>
      <Link href="#sizes" size="md">
        Link size md
      </Link>
      <Link href="#sizes" size="lg">
  • With size responsive, the component will be responsive to the viewport.

Screen prefix

Screen width

Component size

xs → xl0px → 1279pxsm
xl → 3xl1280px → 1919pxmd
3xl → ∞1920px → ∞lg

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkSizeResponsive() {
  return <Link href="#sizes">Responsive Link</Link>;
}

Underline

  • The underline prop can be used to set the underline behavior. The default is always.

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkUnderline() {
  return (
    <div className="flex gap-x-24">
      <Link href="#underline" underline="always">
        underline-always
      </Link>

      <Link href="#underline" underline="hover">
        underline-hover
      </Link>

Security

  • When you use target="_blank" with Links, it is recommended to always set rel="noopener" or rel="noreferrer" when linking to third party content
    • rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the target page can potentially redirect your page to a malicious URL.
    • rel="noreferrer" has the same effect, but also prevents the Referer header from being sent to the new page. ⚠️ Removing the referrer header will affect analytics.
  • Read more about rel here

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkSecurity() {
  return (
    <div className="flex gap-x-24">
      <Link href="#security" rel="noopener" target="_blank">
        Link noopener
      </Link>
      <Link href="#security" rel="noreferrer" target="_blank">
        Link noreferrer
      </Link>
    </div>

Downloadable

  • The download prop can be used to set the downloadable Link.

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkDownloadable() {
  return (
    <Link href="#downloadable" download>
      Downloadable
    </Link>
  );
}

Target

  • Link supports 4 target as a HTML tag : _self, _blank, _parent and _top.
  • Default target is _self.

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkTarget() {
  return (
    <div className="flex gap-x-24">
      <Link href="#target" target="_self">
        Link self
      </Link>
      <Link href="#target" target="_blank">
        Link blank
      </Link>
      <Link href="#target" target="_parent">

Disabled

  • The disabled prop can be used to set the Disabled Link.

Source Code

import { Link } from '@ocean-network-express/magenta-ui/react';

export function LinkDisabled() {
  return (
    <Link href="#disabled" disabled>
      Disabled
    </Link>
  );
}

Was this page helpful?