Skip to main content

​
Overview

The Link component provides a styled, accessible way to create hyperlinks in your application. It integrates seamlessly with routing libraries and supports various visual styles and behaviors.

​
Installation

npm install @naturacosmeticos/natds-web

​
Import

import { Link } from '@naturacosmeticos/natds-web';

​
Props

​
children
ReactNode
required
The content of the link.
​
color
'default' | 'error' | 'inherit' | 'initial' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary'
The Link color. Defaults to "default".
​
href
string
The URL to link to. Required when using as an anchor element.
​
underline
'none' | 'hover' | 'always'
Controls when the link should have an underline. Defaults to "hover".
​
variant
string
Applies the theme typography styles. Defaults to "inherit". Options include all Typography variants like "body1", "body2", "caption", etc.
​
component
React.ElementType
The component used for the root node. Either a string to use a DOM element or a component. Defaults to "a".
​
classes
object
Override or extend the styles applied to the component. See CSS API.
​
TypographyClasses
object
The classes prop applied to the Typography element.

​
Usage

​
Basic Link

import { Link } from '@naturacosmeticos/natds-web';

function BasicLink() {
  return (
    <Link href="#" onClick={(e) => e.preventDefault()}>
      Link text
    </Link>
  );
}

​
Link Colors

import { Link, Typography } from '@naturacosmeticos/natds-web';

function LinkColors() {
  return (
    <>
      <Typography paragraph>
        <Link href="#" color="default">Default color</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="primary">Primary color</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="secondary">Secondary color</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="error">Error color</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="inherit">Inherit color</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="textPrimary">Text primary</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" color="textSecondary">Text secondary</Link>
      </Typography>
    </>
  );
}

​
Underline Variants

import { Link, Typography } from '@naturacosmeticos/natds-web';

function UnderlineVariants() {
  return (
    <>
      <Typography paragraph>
        <Link href="#" underline="none">No underline</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" underline="hover">Underline on hover (default)</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" underline="always">Always underlined</Link>
      </Typography>
    </>
  );
}

​
Typography Variants

import { Link, Typography } from '@naturacosmeticos/natds-web';

function TypographyVariants() {
  return (
    <>
      <Typography paragraph>
        <Link href="#" variant="body1">Body 1 link</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" variant="body2">Body 2 link</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" variant="caption">Caption link</Link>
      </Typography>
      <Typography paragraph>
        <Link href="#" variant="h6">Heading 6 link</Link>
      </Typography>
    </>
  );
}

​
For Breadcrumbs

The inherit color property is useful for breadcrumbs and website footers. 
import { Link } from '@naturacosmeticos/natds-web';

function BreadcrumbLink() {
  return (
    <Link 
      href="/products" 
      color="inherit" 
      underline="hover"
      variant="body2"
    >
      Products
    </Link>
  );
}

// Current page in breadcrumbs (not clickable)
function CurrentPageLink() {
  return (
    <Link 
      aria-current="page"
      color="textPrimary" 
      underline="none"
      variant="body2"
    >
      Current Page
    </Link>
  );
}

​
As Button Component

import { Link } from '@naturacosmeticos/natds-web';

function LinkAsButton() {
  return (
    <Link 
      component="button"
      color="primary"
      onClick={() => console.log('Clicked')}
    >
      Click me
    </Link>
  );
}

​
With React Router

import { Link } from '@naturacosmeticos/natds-web';
import { Link as RouterLink } from 'react-router-dom';

function RouterIntegration() {
  return (
    <Link 
      component={RouterLink} 
      to="/dashboard"
      color="primary"
      underline="hover"
    >
      Go to Dashboard
    </Link>
  );
}

​
Skip to Content (Screen Readers)

import { Link } from '@naturacosmeticos/natds-web';

function SkipLink() {
  return (
    <Link 
      href="#main-content"
      variant="srOnly"
      color="primary"
    >
      Skip to content
    </Link>
  );
}

​
External Links

import { Link, Icon } from '@naturacosmeticos/natds-web';

function ExternalLink() {
  return (
    <Link 
      href="https://example.com"
      target="_blank"
      rel="noopener noreferrer"
      color="primary"
    >
      Visit Example.com
      <Icon 
        name="outlined-action-open-in-new" 
        size="micro"
        style={{ marginLeft: 4, verticalAlign: 'middle' }}
      />
    </Link>
  );
}

​
In Navigation

import { Link } from '@naturacosmeticos/natds-web';
import { useLocation } from 'react-router-dom';

function NavLink({ to, children }) {
  const location = useLocation();
  const isActive = location.pathname === to;

  return (
    <Link
      href={to}
      color={isActive ? 'primary' : 'textPrimary'}
      underline="none"
      variant="body2"
      style={{ 
        fontWeight: isActive ? 600 : 400,
        padding: '8px 16px',
        display: 'block'
      }}
    >
      {children}
    </Link>
  );
}

​
Best Practices

  • Use descriptive link text that makes sense out of context
  • Avoid “click here” or “read more” without context
  • Use underline="hover" for better visual hierarchy
  • Choose appropriate colors based on context (inherit for breadcrumbs, primary for CTAs)
  • Add rel="noopener noreferrer" for external links with target="_blank"
  • Use semantic HTML when possible (default <a> element)

​
Accessibility

  • Link text should clearly describe the destination
  • Use aria-current="page" for current page in navigation
  • External links should indicate they open in a new window
  • Ensure adequate color contrast (WCAG 2.1 Level AA minimum)
  • Links should be keyboard accessible (native <a> behavior)
  • Use variant="srOnly" for screen-reader-only links like skip navigation
  • Avoid using links for actions; use Button component instead

​
Common Patterns

​
Footer Links

import { Link } from '@naturacosmeticos/natds-web';

function FooterLinks() {
  return (
    <nav>
      <Link href="/about" color="inherit" variant="body2">
        About
      </Link>
      {' | '}
      <Link href="/privacy" color="inherit" variant="body2">
        Privacy
      </Link>
      {' | '}
      <Link href="/terms" color="inherit" variant="body2">
        Terms
      </Link>
    </nav>
  );
}

​
Inline Links in Text

import { Typography, Link } from '@naturacosmeticos/natds-web';

function InlineLinks() {
  return (
    <Typography variant="body1">
      For more information, visit our{' '}
      <Link href="/help" color="primary">help center</Link>
      {' '}or{' '}
      <Link href="/contact" color="primary">contact support</Link>.
    </Typography>
  );
}

​
Related Components

​
Material-UI Reference

This component is based on Material-UI’s Link. For advanced usage, see the Material-UI Link documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us