Link

<c.a href="/series/1396">
  <c.span>Breaking Bad</c.span>
</c.a>

The <c.a> component links users to new screens within your app.

Configuration

Web

On the web, by default we will render an <a> element. If you're using a framework like Next.js (opens in a new tab), you can substitute the default-rendered element by passing it to CarnationProvider:

apps/native/pages/_app.tsx

import Link from "next/link";
import { CarnationConfig, CarnationProvider } from "carnation-ds";
 
export default function App({ Component, pageProps }: AppProps) {
  const config: CarnationConfig = {
    link: {
      component: Link,
    },
  };
 
  return (
    <CarnationProvider config={config}>
      <Component {...pageProps} />
    </CarnationProvider>
  );
}

Native

On native, by default we will render a Pressable component that routes via the onPress prop. Follow your navigation library's docs to pass the navigation function to CarnationProvider. The following example uses Expo Router (opens in a new tab):

apps/web/app/_layout.tsx

import { Slot, useRouter } from "expo-router";
import { CarnationConfig, CarnationProvider } from "carnation-ds";
 
export default function Layout() {
  const router = useRouter();
 
  const config: CarnationConfig = {
    link: {
      navigate(href) {
        router.push(href);
      },
    },
  };
 
  return (
    <CarnationProvider config={config}>
      <Slot />
    </CarnationProvider>
  );
}

API Reference

Prop	Type	Default	Description
`children`	`ReactNode \| ((state: PressableState) => ReactNode)`	—	The rendered children node. Pass a function to render based on the pressed state.
`href`	`string`	—	The URL that the hyperlink points to.
`target`	`"_blank" \| "_parent" \| "_top"`	—	Where to display the linked URL.
`rel`	`string`	—	The relationship of the linked URL.

Image Button