CellLink

PreviousNext

Polymorphic link styled for table cells.

import { CellLink } from "@/rl-ui";

<CellLink href="#project">Acme rollout</CellLink>

Examples

href and to

Either prop works on the default <a>; to is preferred when passing a router Link via as.

import { CellLink, Flex } from "@/rl-ui";

<Flex direction="column" gap="2" className="w-full">
<CellLink href="#acme">Via href</CellLink>
<CellLink to="#northstar">Via to</CellLink>
</Flex>

Inside CellLayout

import { CellLink, CellLayout, Badge } from "@/rl-ui";

<CellLayout gap="2" justify="between" className="w-full">
<CellLink href="#acme">Acme rollout</CellLink>
<Badge color="blue">Active</Badge>
</CellLayout>
import { CellLink, Space } from "@/rl-ui";

<Space direction="vertical" size="small">
<CellLink href="#1">Acme rollout</CellLink>
<CellLink href="#2">Northstar</CellLink>
<CellLink href="#3">Orbit migration</CellLink>
</Space>

API

PropTypeDefaultDescription
asElementType"a"Rendered element / component (e.g. router Link).
hrefstring—Anchor href when as="a".
tostring—Preferred nav target; mapped to href for <a> or to for routers.
classNamestring—Additional classes.
childrenReactNode—Link label / content.