Skip to content

Link

Hyperlinks between pages.

Usage

import { Link } from 'matterial'

function App() {
  return <Link href="#">Anchor</Link>
}

Configuration

Global wrappers for Link can be defined in the root layout component. Here's an example to wrap all <Link> components with Next.js <Link> (and therefore utilize all its features):

// app/layout.tsx

import { Html, Body } from 'matterial'
import Link from 'next/link'

const config = {
  linkComponent: Link,
}

export default function Layout({ children }) {
  return (
    <Html config={config}>
      <Body>{children}</Body>
    </Html>
  )
}

Thereafter, Next.js Link props can be safely used, as well as the below Matterial Link props.

// app/my-page/page.tsx

import { Link } from 'matterial'

export default function Page() {
  return (
    <Link
      href="/dashboard"
      replace // Next.js prop
      unstyled // Matterial prop
    >
      Dashboard
    </Link>
  )
}

Link Props

Color

color = string

Unstyled

unstyled = boolean

Unstyled link

Button Link

to = string

Create a button-like link with the to prop on a <Button> component.

<Button to="#" color="primary">Home</Button>
<Button to="#" variant="contained" color="primary">Home</Button>