All components
Link
Inline anchors with underline and plain hover treatments and a themed focus ring.
12345678910111213141516import { Link } from "#components/ui/ark-ui/link.tsx";
export function Example() { return ( <> {/* the variant prop resolves through the StyleX recipe */} <Link href="/docs" variant="underline">Read the docs</Link>
{/* composition: asChild forwards everything onto your element, e.g. a router's link component */} <Link asChild variant="plain"> <RouterLink to="/pricing">Pricing</RouterLink> </Link> </> );}Variants
Read the docsunderline
Read the docsplain
Install
1npx stylexblocks add linkSource
components/ui/ark-ui/link.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { spacing } from '@stylexblocks/ui/tokens/spacing.stylex.ts'
const linkStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', outline: 'none', gap: spacing._1_5, cursor: 'pointer', borderRadius: semanticRadii.control, outlineWidth: { default: null, ':focus': '1px', }, outlineOffset: { default: null, ':focus': '2px', }, outlineStyle: { default: null, ':focus': 'solid', }, outlineColor: { default: null, ':focus': colorPalette.focusRing, }, },})
const linkVariants = stylex.create({ underline: { color: colorPalette.fg, textDecoration: 'underline', textUnderlineOffset: '3px', textDecorationColor: 'currentColor/20', }, plain: { color: colorPalette.fg, textDecoration: { default: null, ':hover': 'underline', }, textUnderlineOffset: { default: null, ':hover': '3px', }, textDecorationColor: { default: null, ':hover': 'currentColor/20', }, },})
export type LinkVariant = keyof typeof linkVariants
/** * Link — recipe and component colocated in one file. The variant prop * resolves mechanically from the axis map. Composition via `asChild`. */const linkRecipe = defineRecipe({ styles: linkStyles, axes: { variant: linkVariants }, defaultVariants: { variant: "plain" },});
export const Link = createComponent("a", linkRecipe, "Link");
export type LinkProps = React.ComponentProps<typeof Link>;